코드 실행 전에 배경 이미지가 로드되는지 확인하는 방법은 무엇입니까?

코드 실행 전 배경 이미지 로드 보장

배경 이미지를 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)');
});

이 코드는 소스 이미지가 로드된 시기를 감지하기 위해 로드 이벤트를 활용하여 메모리에 새 이미지를 생성합니다. 로드 후 이미지를 제거하면 잠재적인 메모리 누수를 방지할 수 있습니다.

바닐라 JavaScript 구현:

바닐라 JavaScript의 경우 솔루션은 다음 형식을 취합니다.

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

약속 기반 추상화:

프로세스를 추상화하기 위해 약속을 반환하는 편리한 함수를 만들 수 있습니다.

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})`;
});

위 내용은 코드 실행 전에 배경 이미지가 로드되는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!