Os elementos nativos <img>
, de interface HTMLImageElement
, embora possua (herdado de HTMLElement
) propriedades de evento como onload
, não possuem meios nativos para se mesurar progresso.
Você pode, então, utilizar a API XMLHttpRequest
para baixar a imagem e medir o progresso durante esse processo.
Um exemplo bem corriqueiro:
const url = 'https://images.unsplash.com/photo-1544867160-9a42c8d11d40';
loadImgSrc(url, (e) => {
console.log('Progresso:', e);
}).then((blobUrl) => {
console.log('Carregada.');
const img = new Image();
img.src = blobUrl;
document.body.appendChild(img);
}).catch((err) => {
console.error(err);
});
function loadImgSrc(url, onProgress) {
const req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';
req.onprogress = function(e) {
onProgress(e.loaded / e.total, e);
};
return new Promise((resolve, reject) => {
req.onload = function(e) {
const blob = new Blob([this.response]);
resolve(window.URL.createObjectURL(blob));
};
req.onerror = reject;
req.send();
});
}
Note que estamos utilizando o evento progress
(anexado à propriedade onprogress
) para calcular uma porcentagem do progresso. Para isso, dividimos loaded
por total
, que são propriedades presentes no primeiro parâmetro (event
).
Após a imagem ser carregada, utilizamos a API Blob
em conjunto com URL.createObjectURL
para criar um blob URI, que fará referência à imagem já carregada.
Essa implementação foi baseada nesta pergunta do StackOverflow em Inglês. Consulte-a para verificar diversos outros exemplos.
Mas tome cuidado que isso pode acabar complicando as coisas. Geralmente, imagens não são tão pesadas assim e calcular o progresso dessa forma pode acabar sendo um exagero. Na maioria dos casos, o mero onload
já funciona.