JavaScript에서 이미지가 로드된 후 콜백 함수를 어떻게 실행할 수 있습니까?

콜백을 사용하여 이미지 로드를 처리하는 다른 방법

이미지를 로드할 때 이미지 로드가 언제 완료되었는지 아는 것이 특정 기능을 구현하는 데 중요할 수 있습니다. . 이 질문은 JavaScript에서 이미지 로드 시 콜백을 실행하기 위한 옵션을 탐색합니다.

해결책 1: .complete 콜백

안정적이고 표준을 준수하는 접근 방식에는 .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');
  });
}

이 코드:

1. img를 사용하여 이미지 요소를 초기화합니다.
2. 이미지 로드를 처리하기 위해 로드된 콜백 함수를 정의합니다.
3. 이미지는 .complete를 사용하여 이미 완료되었습니다.
4. 완료되면 즉시 콜백을 호출합니다.
5. 완료되지 않으면 'load'(로드 시 콜백 실행) 및 ' error'(로드 실패를 알리기 위해).

추가 참고

이 접근 방식은 이미지가 준비되자마자 콜백을 트리거하여 이벤트 리스너 대기로 인한 불필요한 지연을 방지하므로 매우 효율적입니다. 주요 브라우저에서도 지원되며 오류 처리가 쉽습니다.

위 내용은 JavaScript에서 이미지가 로드된 후 콜백 함수를 어떻게 실행할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!