image.onload olayı ve tarayıcı önbelleği

Bir resim yüklendikten sonra bir uyarı kutusu oluşturmak istiyorum, ancak resim tarayıcı önbelleğine kaydedilirse .onloadolay tetiklenmeyecektir.

Bir görüntü yüklendiğinde, görüntünün önbelleğe alınıp alınmadığına bakılmaksızın nasıl uyarı tetiklerim?

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

Görüntüyü dinamik olarak oluştururken, onloadözelliği src.

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

Fiddle - en son Firefox ve Chrome sürümlerinde test edildi.

Ayrıca , dinamik olarak oluşturulmuş tek bir görsel için uyarladığım bu gönderideki cevabı da kullanabilirsiniz :

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

Vaktini boşa harcamak

Src zaten ayarlanmışsa, siz olay işleyicisini bağlamadan önce olay önbelleğe alınmış durumda tetikleniyor demektir. Yani, olayı da temel alarak tetiklemelisiniz .complete.

kod örneği:

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

Bu tür durumlar için iki olası çözüm vardır:

1. Bu gönderide önerilen çözümü kullanın

2. srcTarayıcının onu tekrar indirmeye zorlamak için resme benzersiz bir son ek ekleyin , örneğin:

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

Bu kodda, görsel URL'sinin sonuna geçerli zaman damgasını her eklediğinizde, onu benzersiz kılarsınız ve tarayıcı, görseli tekrar indirir.

Bugün aynı sorunla karşılaştım. Çeşitli yöntemleri denedikten sonra , sorunun bir kısmını çözmek $(window).load(function() {})yerine boyutlandırma kodunu içeri document.readykoymanın (sayfayı ajaxlamıyorsanız) fark ettim.

Bunu Chrome'da yapabileceğinizi öğrendim:

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

.Src'nin kendisine ayarlanması, onload olayını tetikleyecektir.