JavaScript progression du chargement d'une image

Avec cela, vous ajoutez 2 nouvelles fonctions sur l'Image (les) objet:

 Image.prototype.load = function(url){
        var thisImg = this;
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open('GET', url,true);
        xmlHTTP.responseType = 'arraybuffer';
        xmlHTTP.onload = function(e) {
            var blob = new Blob([this.response]);
            thisImg.src = window.URL.createObjectURL(blob);
        };
        xmlHTTP.onprogress = function(e) {
            thisImg.completedPercentage = parseInt((e.loaded / e.total) * 100);
        };
        xmlHTTP.onloadstart = function() {
            thisImg.completedPercentage = 0;
        };
        xmlHTTP.send();
    };

    Image.prototype.completedPercentage = 0;

Et ici, vous utilisez la fonction de charge et ajout de l'image dans une div.

var img = new Image();
img.load("url");
document.getElementById("myDiv").appendChild(img);

Pendant le chargement de l'état, vous pouvez vérifier le pourcentage de progression à l'aide de img.completedPercentage.

Juste pour ajouter à la les améliorations, j'ai modifié Julian réponse (qui à son tour modifié Sebastian). J'ai déplacé la logique d'une fonction au lieu de modifier le Image objet. Cette fonction renvoie un Promise qui se résout avec l'URL de l'objet, qui ne doit être inséré comme src attribut d'un image tag.

JS:

/**
* Loads an image with progress callback.
*
* The `onprogress` callback will be called by XMLHttpRequest's onprogress
* event, and will receive the loading progress ratio as an whole number.
* However, if it's not possible to compute the progress ratio, `onprogress`
* will be called only once passing -1 as progress value. This is useful to,
* for example, change the progress animation to an undefined animation.
*
* @param  {string}   imageUrl   The image to load
* @param  {Function} onprogress
* @return {Promise}
*/
function loadImage(imageUrl, onprogress) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
var notifiedNotComputable = false;
xhr.open('GET', imageUrl, true);
xhr.responseType = 'arraybuffer';
xhr.onprogress = function(ev) {
if (ev.lengthComputable) {
onprogress(parseInt((ev.loaded / ev.total) * 100));
} else {
if (!notifiedNotComputable) {
notifiedNotComputable = true;
onprogress(-1);
}
}
}
xhr.onloadend = function() {
if (!xhr.status.toString().match(/^2/)) {
reject(xhr);
} else {
if (!notifiedNotComputable) {
onprogress(100);
}
var options = {}
var headers = xhr.getAllResponseHeaders();
var m = headers.match(/^Content-Type\:\s*(.*?)$/mi);
if (m && m[1]) {
options.type = m[1];
}
var blob = new Blob([this.response], options);
resolve(window.URL.createObjectURL(blob));
}
}
xhr.send();
});
}
/*****************
* Example usage
*/
var imgContainer = document.getElementById('imgcont');
var progressBar = document.getElementById('progress');
var imageUrl = 'https://placekitten.com/g/2000/2000';
loadImage(imageUrl, (ratio) => {
if (ratio == -1) {
//Ratio not computable. Let's make this bar an undefined one.
//Remember that since ratio isn't computable, calling this function
//makes no further sense, so it won't be called again.
progressBar.removeAttribute('value');
} else {
//We have progress ratio; update the bar.
progressBar.value = ratio;
}
})
.then(imgSrc => {
//Loading successfuly complete; set the image and probably do other stuff.
imgContainer.src = imgSrc;
}, xhr => {
//An error occured. We have the XHR object to see what happened.
});

HTML:

<progress id="progress" value="0" max="100" style="width: 100%;"></progress>
<img id="imgcont" />

Voici une petite mise à jour du code de Julian Jensen afin d'être en mesure de dessiner l'image dans un Canvas après il est chargé :

xmlHTTP.onload = function( e ) {
var h = xmlHTTP.getAllResponseHeaders(),
m = h.match( /^Content-Type\:\s*(.*?)$/mi ),
mimeType = m[ 1 ] || 'image/png';
//Remove your progress bar or whatever here. Load is done.
var blob = new Blob( [ this.response ], { type: mimeType } );
thisImg.src = window.URL.createObjectURL( blob );
thisImg.onload = function()
{
if ( callback ) callback( this );
};
};

Si vous voulez traiter votre image chargée, que vous devez ajouter une autre fonction, car

thisImg.src = window.URL.createObjectURL(blob)

commence à traiter l'image comme un fil.

Vous devez ajouter une nouvelle fonction pour le corps de la charge de prototype, comme

  this.onload = function(e)
{
var canvas = document.createElement('canvas')
canvas.width = this.width
canvas.height = this.height
canvas.getContext('2d').drawImage(this, 0, 0)
}

Celle de me faire des maux de tête à réaliser 🙂