JavaScript에서 이미지 비동기 로딩

JavaScript를 통해 동적으로 생성되는 이미지도 비동기적으로 로드됩니다. 다음 코드를 예로 살펴보겠습니다:

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

보시다시피, 여기서는 img 태그를 생성하고, 그 src에 이미지 경로를 지정한 후, 이 이미지를 body에 배치합니다. 그러나 이미지는 페이지에 즉시 나타나지 않습니다. 사실, src에 이미지 경로를 지정하는 순간 브라우저는 해당 이미지를 사이트에서 다운로드하기 시작합니다. 이미지가 완전히 다운로드된 후에야 비로소 브라우저가 이를 표시할 수 있습니다.

이미지가 상당히 크고 인터넷 속도가 매우 느리다면, 사이트 사용자는 이미지가 로드되기 전까지 빈 이미지를 잠시 "감상"해야 할 수 있습니다.

사실 img 태그에는 이미지 로드가 완료될 때 발생하는 load 이벤트가 존재합니다:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// 이미지 로드 시 실행됨
});

이를 활용하여 이미지가 로드된 후에만 페이지에 이미지를 배치할 수 있습니다:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // 로드 완료 시 배치
});

이미지가 반드시 로드되리란 보장은 없습니다: 이미지 경로가 잘못되었거나, 인터넷 연결이 끊어지거나, 사이트 서버에 문제가 생기는 등의 상황이 발생할 수 있습니다. 다시 말해, 예외 상황이 발생할 수 있습니다. 이 경우 load 이벤트 대신 error 이벤트가 발생합니다:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// 이미지 로드 오류
});

버튼을 만들어 클릭 시 이미지를 로드하세요. 이미지가 로드되면 표시하십시오. 이미지 로드에 문제가 있을 경우 메시지를 출력하세요.