배경 이미지가 로드되었는지 확실하게 확인하는 방법은 무엇입니까?

배경 이미지 로더 사용

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;

다음과 같이 할 수 있습니다. 또한 이미지 로딩을 처리하고 약속을 반환하는 추상화된 함수를 생성합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!