JavaScript 미리로드 이미지

Harshit Jindal 2022년1월15일
JavaScript 미리로드 이미지

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

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

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

JavaScript로 이미지 미리로드

순서

  • 변수preloaded를 시작하여 사전로드 단계에서로드 된 이미지 수를 저장하고 이미지 배열images를 시작하여 사전로드 할 모든 이미지의 주소를 저장합니다.
  • 사전로드해야하는 모든 이미지에 대한 이미지 객체를 만들고images배열의 객체에src속성을 저장하는preLoader()함수를 정의합니다. 또한progress()함수를 첨부하여 성공적으로 사전로드 된 이미지 수를 유지하고 모든 이미지가 사전로드 된 후 작업을 수행합니다.
  • DOM 콘텐츠가로드 될 때preLoader()를 호출하는 창에 이벤트 리스너를 추가합니다.

암호

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);
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

관련 문장 - JavaScript Image