배경 이미지 로더 사용

body 태그에 배경 이미지를 설정하여 배경 이미지가 로드되었는지 확인하려고 합니다. 그런 다음 load() 함수를 사용합니다. 그러나 이 접근 방식은 배경 이미지에는 효과적이지 않습니다.

배경 이미지가 완전히 로드되었는지 확인하려면 다음과 같은 다른 기술을 활용할 수 있습니다.

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

이 메소드는 메모리에 새 이미지를 생성하고 해당 이미지에 로드 이벤트 리스너를 연결합니다. 이미지가 로드되면 로드 이벤트가 트리거되고 배경 이미지가 body 태그에 설정됩니다.

바닐라 JavaScript에서는 다음과 같이 구현할 수 있습니다.

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url('   src   ')';
});
image.src = src;

이미지 로딩을 처리하고 promise를 반환하는 추상화된 함수를 만들 수도 있습니다.

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

이 접근 방식을 사용하면 배경 이미지 로드 완료를 안정적으로 확인할 수 있으며 이미지가 완전히 로드된 후에만 코드가 실행되도록 할 수 있습니다.