image.onload 이벤트 및 브라우저 캐시

이미지가로드 된 후 경고 상자를 만들고 싶지만 이미지가 브라우저 캐시에 저장되면 .onload이벤트가 발생하지 않습니다.

이미지가 캐시되었는지 여부에 관계없이 이미지가로드되었을 때 경고를 트리거하려면 어떻게해야합니까?

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

이미지를 동적으로 생성 할 onload때 src.

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

Fiddle- 최신 Firefox 및 Chrome 릴리스에서 테스트되었습니다.

동적으로 생성 된 단일 이미지에 적용한 이 게시물 의 답변을 사용할 수도 있습니다 .

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

깡깡이

src가 이미 설정되어 있으면 이벤트 핸들러가 바인딩되기 전에 캐시 된 케이스에서 이벤트가 발생합니다. 따라서 이벤트도 기반으로 트리거해야합니다 .complete.

코드 샘플 :

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

이러한 종류의 상황에 대해 두 가지 가능한 솔루션이 있습니다.

1. 이 게시물에 제안 된 솔루션 사용

2. 다음 src과 같이 브라우저가 다시 다운로드하도록 이미지 에 고유 한 접미사를 추가합니다 .

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

이 코드에서는 이미지 URL 끝에 현재 타임 스탬프를 추가 할 때마다 고유하게 만들고 브라우저에서 이미지를 다시 다운로드합니다.

오늘도 같은 문제를 만났습니다. 다양한 방법을 시도 후, 난 그냥 내 크기의 코드를 넣어 실현 $(window).load(function() {})대신에 document.ready(페이지를 ajaxing하지 않는 경우) 문제의 일부를 해결할 것입니다.

Chrome에서이 작업을 수행 할 수 있음을 발견했습니다.

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

.src를 자체로 설정하면 onload 이벤트가 트리거됩니다.