이미지가 캐시된 경우에도 이미지 'onload' 이벤트를 트리거하는 방법은 무엇입니까?

이미지 온로드 이벤트 및 브라우저 캐싱

이미지 로드 후 경고 상자를 생성할 때 .onload 이벤트를 사용하는 것이 일반적입니다. 그러나 이미지가 이미 브라우저에 캐시되어 있으면 .onload 이벤트가 실행되지 않습니다. 캐시된 상태에 관계없이 모든 이미지에 대해 경고를 실행하려는 경우 이는 문제가 될 수 있습니다.

해결책

이 문제를 해결하려면 입증된 두 가지 방법이 있습니다. 방법:

방법 1: src 앞에 onload 속성 설정

동적으로 생성된 이미지는 src 속성 앞에 onload 속성을 설정하여 onload 이벤트를 올바르게 트리거할 수 있습니다.

var img = new Image();
img.onload = function () {
  alert("image is loaded");
};
img.src = "img.jpg";

방법 2: jQuery의 'load' 이벤트 사용

jQuery를 사용하면 'load' 이벤트를 사용하여 캐싱에 관계없이 경고가 트리거되도록 할 수 있습니다.

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

이러한 기술은 캐시된 이미지와 캐시되지 않은 이미지를 모두 효과적으로 처리하므로 모든 경우에 성공적으로 경고를 표시할 수 있습니다.

위 내용은 이미지가 캐시된 경우에도 이미지 'onload' 이벤트를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!