성공적인 이미지 로딩 후 JavaScript 콜백을 실행하는 방법은 무엇입니까?

이미지 로드 및 JavaScript 콜백

질문: 이미지 로드에 성공하면 어떻게 JavaScript 콜백을 실행할 수 있나요? 또는 이 작업을 수행할 수 있는 방법이 있습니까?

답변:

JavaScript에서 이미지 로드 콜백을 수행하는 다양한 방법이 있습니다. 한 가지 접근 방식은 아래와 같이 .complete 속성과 콜백 함수를 활용하는 것입니다.

JavaScript 코드:

var img = document.querySelector('img')

function loaded() {
  alert('loaded')
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
      alert('error')
  })
}

이 접근 방식은 표준을 준수하지만 그렇지 않습니다. 외부 종속성이 필요하며 불필요한 지연이 발생하지 않습니다. img.complete 속성을 처음에 확인하고, 이미 이미지가 로드되어 있으면 콜백이 즉시 실행됩니다. 이미지가 로드되지 않으면 'load' 및 'error' 이벤트에 이벤트 리스너가 추가되어 콜백이 적절하게 실행되는지 확인합니다.

위 내용은 성공적인 이미지 로딩 후 JavaScript 콜백을 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!