XMLHttpRequest JS Chargement de l'image

Question

Je souhaite créer un site Web qui charge une image via XMLHttpRequest(). (XMLHttpRequest parce que je veux représenter l'utilisateur un% progressbar)

Mon code:

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 
} 

Mon problème est que je ne pas savoir comment afficher l'image qui est maintenant chargé. J'espère que n'importe qui peut m'aider :) Merci ...

Answer 1

Vous pouvez le faire en utilisant des URI de données, mais il est difficile de faire fonctionner cela dans tous les navigateurs actuels. Si les options de mise en cache sont correctement définies, vous pouvez mieux les charger deux fois: d'abord en utilisant votre requête AJAX, puis, une fois l'image mise en cache par le navigateur, une autre fois en utilisant les fonctions d'image habituelles. La deuxième fois, votre image ne sera plus récupérée du serveur, mais le navigateur utilisera le fichier mis en cache et affichera l'image presque instantanément.