Imagem de pré-carregamento de JavaScript

Este tutorial ensina como pré-carregar imagens com JavaScript.

Antes de falar sobre como pré-carregar imagens, vamos primeiro entender por que precisamos pré-carregar imagens. Quando definimos uma imagem usando a tag <image> em HTML, o navegador vê essa imagem, baixa-a e armazena em cache para nós antes que a página carregue. Isso torna a exibição de imagens bastante simples. Mas quando temos algum carregamento dinâmico de imagens acionado por código JavaScript, o navegador não tem informações anteriores sobre isso. Portanto, essas imagens não podem ser baixadas e armazenadas em cache. Essas imagens serão carregadas instantaneamente e podem causar um atraso na exibição, pois o download da imagem é feito primeiro. Faz com que um site tenha uma aparência muito ruim e, portanto, essas imagens devem ser pré-carregadas.

Por exemplo: Se quisermos mostrar um efeito rollover, ou seja, mudar a imagem exibida ao passar o mouse sobre ela, temos que ter certeza de que a segunda imagem está pré-carregada; caso contrário, a imagem demorará muito para carregar, o que faz com que o site pareça feio e não responda.

Pré-carregar imagens com JavaScript

Procedimento

Código

var preloaded = 0;
var images = new Array("img1.jpg", "img2.jpg", "img3.jpg");
 
function preLoader(e) {
    for (var i = 0; i < images.length; i++) {
        var tempImage = new Image();
         
        tempImage.addEventListener("load", progress, true);
        tempImage.src = imageArray[i];
    }
}
 
function progress() {
    preloaded++;
     
    if (preloaded == imageArray.length) {
        //ALL Images have been loaded, perform the desired action
    }
}
this.addEventListener("DOMContentLoaded", preLoader, true);