JavaScript에서 배경 이미지가 완전히 로드되었는지 확인하는 방법은 무엇입니까?

배경 이미지 로딩 상태 확인

웹 개발에서는 body 태그 등 다양한 요소에 배경 이미지를 설정하고, 일반적인 관행입니다. 그러나 후속 코드를 실행하기 전에 이미지가 완전히 로드되었는지 확인하는 것은 어려울 수 있습니다.

이 문제를 해결하려면 다음 접근 방식을 고려하십시오.

$('<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)');
});

이 방법은 보이지 않는 이미지 요소를 생성합니다. 메모리에 저장하고 원하는 배경 이미지 URL을 소스 속성에 할당합니다. 로드 이벤트를 수신하면 이미지가 완전히 로드된 시기를 감지한 다음 이를 지정된 요소의 배경 이미지로 적용할 수 있습니다.

JavaScript에서 코드는 다음과 같이 표시됩니다.

const src = 'http://picture.de/image.png';
const image = new Image();
image.addEventListener('load', function() {
    document.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(() => {
    document.body.style.backgroundImage = `url(${image})`;
});

이 접근 방식을 사용하면 이미지 로드 프로세스를 비동기식으로 처리하고 이미지가 사용 가능한 경우에만 조건부로 후속 작업을 수행할 수 있습니다.

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