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

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