브라우저 캐싱을 사용해도 이미지의 'onload' 이벤트가 발생하는지 확인하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-10-25 01:45:02
원래의
588명이 탐색했습니다.

How to Ensure an Image's `onload` Event Fires Even With Browser Caching?

캐시된 이미지 로드 및 브라우저 캐시

이미지 로드 후 경고를 표시하려고 할 때 다음과 같은 경우 .onload 이벤트가 트리거되지 않을 수 있습니다. 이미지가 브라우저에 캐시되었습니다. 캐싱에 관계없이 경고가 표시되도록 하려면 다음과 같은 몇 가지 접근 방식이 있습니다.

소스 전에 onload 속성 설정

소스(src)를 설정하기 전에 .onload 속성을 구성합니다. 이미지의. 이렇게 하면 브라우저가 캐시에서 이미지를 확인하기 전에 onload 이벤트 리스너가 등록됩니다.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";
로그인 후 복사

jQuery 이벤트 핸들러 활용

또는 jQuery의 .on을 활용하세요. ('로드') 이벤트 핸들러. 이 방법은 동적으로 생성된 이미지에 특히 효과적입니다.

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

두 방법 모두 이미지 캐시 여부에 관계없이 경고 이벤트를 효과적으로 트리거합니다. 이벤트 등록 순서를 수정하거나 jQuery를 활용하면 이미지가 브라우저 캐시에 있더라도 .onload 이벤트가 발생하도록 보장할 수 있습니다.

위 내용은 브라우저 캐싱을 사용해도 이미지의 'onload' 이벤트가 발생하는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿