JavaScript 미리로드 이미지

이 자습서에서는 JavaScript로 이미지를 미리로드하는 방법을 설명합니다.

이미지를 미리로드하는 방법에 대해 이야기하기 전에 먼저 이미지를 미리로드해야하는 이유를 이해하겠습니다. HTML에서<image>태그를 사용하여 이미지를 정의하면 브라우저는 해당 이미지를보고 다운로드하고 페이지가로드되기 전에 캐시합니다. 이미지를 매우 간단하게 표시합니다. 그러나 JavaScript 코드에 의해 트리거 된 이미지의 동적로드가있을 때 브라우저에는 이에 대한 사전 정보가 없습니다. 따라서 이러한 이미지는 다운로드 및 캐시 할 수 없습니다. 이러한 이미지는 즉시로드되며 이미지가 먼저 다운로드 될 때 디스플레이에 지연이 발생합니다. 웹 사이트를 매우 나쁘게 보이게하므로 이러한 이미지는 사전로드되어야합니다.

예 : 롤오버 효과를 표시하려면, 즉 마우스를 위에 올려 놓을 때 표시되는 이미지를 변경하려면 두 번째 이미지가 미리로드되어 있는지 확인해야합니다. 그렇지 않으면 이미지를로드하는 데 많은 시간이 걸리므로 웹 사이트가보기 흉하고 응답하지 않게됩니다.

JavaScript로 이미지 미리로드

순서

암호

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);