[JS] Preload images with javascript

zineeworld 2016. 8. 9. 20:01


range 값을 변경하면 배경 이미지가 transition을 통해 자연스럽게 변하는 형태다.

비주얼이 큰 부분을 차지하는 페이지이다.

아래 스크린 샷에서 볼 수 있듯 처음에는 이미지 1개만 로드되어, 배경이 변경될 때 깜빡이는 현상이 생긴다.

이미지가 처음에 모두 로드되어 있다면 없어질 현상이다.



방법을 찾아보니 간단한 스크립트를 통해 미리 받아 놓을 수 있었다.

JavaScript Method #1

Unobtrusive, gracefully degrading, and easy to implement, simply edit/add the image paths/names as needed — no other editing required:

<div class="hidden">
	<script type="text/javascript">
			var images = new Array();
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image();
					images[i].src = preload.arguments[i];

This method is especially convenient for preloading large numbers of images. On one of my gallery sites, I use this technique to preload almost 50 images. By including this script on the login page as well as internal money pages, most of the gallery images are preloaded by the time the user enters their login credentials. Nice.