[JS] Preload images with javascript

BEFORE

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

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

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

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

 

AFTER

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

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">
		<!--//--><![CDATA[//><!--
			var images = new Array();
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image();
					images[i].src = preload.arguments[i];
				}
			}
			preload(
				"이미지경로/이미지파일1.jpg",
				"이미지경로/이미지파일2.jpg",
				"이미지경로/이미지파일3.jpg"
			);
		//--><!]]>
	</script>
</div>

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.