XMLHttpRequest JS Image loading

Question

Quiero crear un sitio web que cargue una imagen mediante XMLHttpRequest(). (XMLHttpRequest porque quiero representar al usuario una progressbar%)

Mi Código:

var req = new XMLHttpRequest(); 

req.addEventListener("progress", onUpdateProgress, false); 
req.addEventListener("load", onTransferComplete, false); 
req.addEventListener("error", onTransferFailed, false); 
req.addEventListener("abort", onTransferFailed, false); 

req.open("GET", "image.png", true); 
req.send(); 

function onUpdateProgress(e) { 
if (e.lengthComputable) { 
var percent_complete = e.loaded/e.total; 
if (Math.round(percent_complete*200)>=20) { 
        $("#progress").animate({ 
        width: Math.round(percent_complete*100) 
      }, 0); 
     } 
     } 
} 

function onTransferFailed(e) { 
    alert("Something went wrong. Please try again."); 
} 

function onTransferComplete(e) { 
    //Problem 
} 

Mi problema es que no sé cómo mostrar la imagen que ahora se carga. Espero que alguien me pueda ayudar :) Gracias ...

Answer 1

Puede hacerlo usando URI de DATOS, pero es difícil hacerlo funcionar en todos los navegadores actuales.

Si las opciones de caché están configuradas correctamente, puede cargarlas mejor dos veces: primero usando su solicitud AJAX, luego, después de que el navegador haya guardado la imagen, otra vez usando las funciones de imagen habituales. La segunda vez su imagen no será recuperada del servidor nuevamente, pero el navegador usará el archivo en caché y mostrará la imagen casi al instante.