이미지를 완전 로드한 후 엘리먼트에 추가하는 효과적인 방법은?

5,916
View Count

주소 복사하기

이미지를 로딩할 경우 용량이 매우 큰 경우를 감안하여 완전히 로딩이 끝난 후에 추가하는 방법은 어떻게 할까요?

var imgEle = new Image;

위와 같이 인스턴스를 생성한 후 DOM에 추가하는 방법은 아래와 같습니다.

# 제이쿼리인 경우

$(imgEle).load(function () {
  // code
).error(function () {
  // 에러에 대하여 처리
}).attr('src', '파일명');

# 자바스크립트 사용시

imgEle = new Image;
imgEle.setAttribute('src', '/');
imgEle.onload = function() {
  // code
};

imgEle.src = '이미지 위치';

아래는 addEventListner를 사용한 방법입니다.

imgEle = new Image;
imgEle.setAttribute('src', '/');
imgEle.addEventListener('load', function() {
  // code
});

imgEle.src = '이미지 위치';

추가적으로 이미지를 로딩 후 부드럽게 보이는 효과를 추가하면 어떻까요?
제이쿼리의 경우 DOM에 추가할 때 fade()를 사용하면 쉽고 간단하게 이미지가 부드럽게 로딩되는 것을 볼 수 있습니다.

코드 스니펫 widget

아래의 글도 찾고 계시지 않나요?