[javascript] 이미지 동적 로딩

Javascript을 이용한 간단한 이미지 동적 로딩을 다룬다. 동적로딩이라는 부분이 애매할 수 있는데, 이미지가 매우크거나 속도나 느린 네트워크에서는 이미지가 바로 보이지 않는다. 일부만 천천히 로딩되거나 중간에 로딩이 실패하면서 이미지가 제대로 보이지 않는다. 이럴 경우 이미지가 제대로 로딩이 완료되면 표시되면 화면에 표시되고 그렇지 않으면 표시되지 않게 할 수 있다. 이를 응용하면 이미지 로딩 중을 기본으로 화면에 표시하고 로딩되면 표시하도록 만들수 있다. 그럼 간단하게 만들 수 있는 방법을 알아보자.

작성자: http://ospace.tistory.com/ (ospace114@empal.com)

단순 이미지 로딩

가장 일반적인 이미지를 로딩하는 예제이다. 이미지 태그를 사용한 간단한 예제이다.

<img src="too_big_image.jpg">

위의 경우 이미지 URL가 단순히 src 속성에 할당된다. 브라우저에 따라 차이가 있을 수 있지만 Chrome에서는 이미지가 로딩되는 과정을 표시한다.

동적으로 이미지 로딩

이미지가 전부 로딩되어야 이미지를 표시하고, 그 전에는 로딩 중인 상태를 표시하고 싶다고 생각할 수 있다.
먼저 이미지 태그에서 기본 로딩 준비중인 이미지로 변경한다. 그러면 기본으로 로딩 중임이 표시된다.

<img id="delay" src="loading.gif">

Javascript로 이미지 로딩

다음은 자바스크립트를 이용해서 다음과 같은 과정으로 동적이미지 로딩을 처리한다.

1. 이미지 dom 객체를 만들고 로딩할 이미지 URL를 src 속성에 설정한다.
2. onload 이벤트 핸들러에 이미지 로딩이 완료되면 기존 이미지 태그 src 속성에 로딩된 이미지를 설정한다

위의 과정을 자바스크립트로 표현하면 다음과 같다.

var asyncImg = new Image();
asyncImg.onload = function() {
    document.getElementById('delay').src = this.src;
};
asyncImg.src = "too_big_image.jpg";

jQuery로 이미지 로딩

jQuery로 만들면 좀더 간편하게 만들 수 있다.

$('<img>').on('load', function () {
    $('#delay').attr('src', this.src);
})
.attr('src', 'too_big_image.jpg');

마무리

간단하게 동적으로 이미지 로딩을 처리해보았다. 이를 좀더 응용하면 조건에 따라 다른 이미지가 로딩하게 할 수 있거나 에러가 발생할 경우 에러에 따라서 다르게 이미지를 표시할 수도 있다. 이렇게 초기 로딩 이미지를 처리하게 된다면 초기 페이지 로딩 시간도 많이 줄어들기 때문에 잘 활용하면 장점도 많다.
부족한 글이지만 여러분에게 도움이 되었으면 하네요. 모두 즐거운 코딩생활되세요. ospace.

참조

[1] Andrew Chalkley, Use jQuery to Asynchronously Load an Image, http://blog.teamtreehouse.com/using-jquery-asynchronously-loading-image, 2018.02.27