image.onload zdarzenie i pamięć podręczna przeglądarki

Chcę utworzyć pole ostrzegawcze po załadowaniu obrazu, ale jeśli obraz zostanie zapisany w pamięci podręcznej przeglądarki, rozszerzenie .onload zdarzenie nie zostanie .

Jak wyzwolić alert, gdy obraz został załadowany, niezależnie od tego, czy został on zapisany w pamięci podręcznej, czy nie?

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

Podczas dynamicznego generowania obrazu ustaw onloadwłaściwość przed src.

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

Fiddle - testowane na najnowszych wersjach przeglądarek Firefox i Chrome.

Możesz również skorzystać z odpowiedzi w tym poście , którą dostosowałem dla pojedynczego dynamicznie generowanego obrazu:

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

Skrzypce

Jeśli src jest już ustawiony, zdarzenie jest wyzwalane w przypadku w pamięci podręcznej, zanim nawet zostanie powiązana procedura obsługi zdarzeń. Więc powinieneś wyzwolić zdarzenie .completerównież na podstawie .

przykładowy kod:

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

Istnieją dwa możliwe rozwiązania tego rodzaju sytuacji:

1. Skorzystaj z rozwiązania sugerowanego w tym poście

2. Dodaj unikalny przyrostek do obrazu src aby wymusić ponowne pobranie go przez przeglądarkę, na przykład:

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

W tym kodzie za każdym razem, gdy dodajesz aktualną sygnaturę czasową na końcu adresu URL obrazu, nadasz mu unikalny charakter, a przeglądarka ponownie pobierze obraz

Spotkałem się dzisiaj z tym samym problemem. Po wypróbowaniu różnych metod zdaję sobie sprawę, że umieszczenie kodu rozmiaru w środku $(window).load(function() {})zamiast document.readyrozwiązałoby część problemu (jeśli nie AJAXUJESZ strony).

Odkryłem, że możesz to zrobić po prostu w Chrome:

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

Ustawienie samego .src wyzwoli zdarzenie onload.