JavaScript에서 이미지 로드 이벤트를 처리하기 위해 콜백을 어떻게 구현할 수 있습니까?

이미지 로드 이벤트에 대한 콜백 구현

웹 애플리케이션에서 이미지 작업을 할 때 이미지 로드가 언제 완료되었는지 아는 것이 특정 기능에 매우 중요합니다. 이를 달성하는 효율적인 방법은 콜백을 사용하는 것입니다. 이 기사에서는 이미지 로드가 완료되자마자 JavaScript 콜백을 실행하는 방법을 살펴보겠습니다.

콜백과 함께 .complete 사용

표준 준수 추가 종속성이 없는 메서드를 사용하면 콜백 함수와 함께 .complete 속성을 활용할 수 있습니다. 이 기술을 사용하면 이미지가 로드되는 데 필요한 것보다 더 오래 기다리지 않게 됩니다.

var img = document.querySelector('img');

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

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

이 코드 조각은 먼저 .complete 속성을 검사하여 이미지가 이미 로드되었는지 확인합니다. true인 경우 selected() 콜백이 즉시 호출됩니다. false인 경우 콜백과 오류 처리를 각각 처리하기 위해 로드 이벤트와 오류 이벤트에 이벤트 리스너가 연결됩니다.

이 방법은 안정적이며 이미지가 완전히 로드되자마자 콜백이 실행되도록 보장합니다. 불필요한 대기시간을 최소화합니다.

위 내용은 JavaScript에서 이미지 로드 이벤트를 처리하기 위해 콜백을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!