image.onload acara dan cache browser

Saya ingin membuat kotak peringatan setelah gambar dimuat, tetapi jika gambar disimpan di cache browser, .onloadacara tidak akan diaktifkan.

Bagaimana cara memicu peringatan ketika gambar telah dimuat terlepas dari apakah gambar telah di-cache atau tidak?

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

Saat Anda membuat gambar secara dinamis, setel onloadproperti sebelum src.

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

Fiddle - diuji pada rilis Firefox dan Chrome terbaru.

Anda juga dapat menggunakan jawabannya dalam posting ini , yang saya adaptasi untuk satu gambar yang dihasilkan secara dinamis:

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

Biola

Jika src sudah disetel maka peristiwa tersebut diaktifkan dalam kasus yang di-cache bahkan sebelum Anda mengikat pengendali peristiwa. Jadi, Anda juga harus memicu acara berdasarkan .complete.

contoh kode:

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

Ada dua solusi yang mungkin untuk situasi semacam ini:

1. Gunakan solusi yang disarankan di posting ini

2. Tambahkan sufiks unik ke gambar srcuntuk memaksa browser mendownloadnya lagi, seperti ini:

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

Dalam kode ini setiap kali menambahkan stempel waktu saat ini ke akhir URL gambar, Anda membuatnya unik dan browser akan mengunduh gambar itu lagi

Saya telah menemui masalah yang sama hari ini. Setelah mencoba berbagai metode, saya menyadari bahwa hanya menempatkan kode ukuran dalam $(window).load(function() {})bukannya document.readyakan memecahkan bagian dari masalah (jika Anda tidak ajaxing halaman).

Saya menemukan bahwa Anda dapat melakukan ini di Chrome:

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

Menyetel .src ke dirinya sendiri akan memicu acara onload.