배경 이미지가 로드되면 어떻게 감지할 수 있나요?

배경 이미지 로드 상태 감지

body 태그의 배경 이미지가 성공적으로 로드되면 일부 코드를 트리거하고 싶으십니까? 이 어려운 문제에 대한 솔루션 소개:

$().load()를 사용한 초기 접근 방식은 배경 이미지를 제외한 DOM 요소의 제한으로 인해 실패합니다. 대신 다음 전략을 사용합니다.

1. 새 이미지 요소를 생성하고 대상 배경 이미지의 URL과 일치하도록 src 속성을 설정합니다.
2. 'load' 이벤트 리스너를 활용하여 캡처합니다. 이미지 로딩이 완료됩니다.

jQuery에서 이 기술은 다음과 같이 해석됩니다.

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

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