자바스크립트 이미지 preload 구현하기 이미지 변경 시 깜빡임 제거

2024-04-03

---

사진: Unsplash 의 Guillermo Ferla

---

1. 방법

 

 

아래와 같이 코드를 구성하면 최초 페이지 접속 후 이미지가 지역변수에 담기게 되어 이후에 이미지 경로를 변경해도 깜빡임 현상을 제거할 수 있다. 

 

let images = []; //이미지 객체를 담을 변수
let imagesUrs = []; //동적이미지 url 정보르 담을 변수 실제 이미지 경로를 넣어주면 된다.


document.addEventListener('DOMContentLoaded', function () {
    function imgPreload() {
        for(let i = 0; i < imageUrls.length; i++) {
            images[i] = new Image();
            images[i].src = imageUrls[i];
        }
    }
    imgPreload()
}

---

메인 이미지 출처 : 사진: Unsplash의Guillermo Ferla