image.onload Ereignis und Browser-Cache

110

Ich möchte nach dem Laden eines Bildes ein Warnfeld erstellen, aber wenn das Bild im Browser-Cache gespeichert wird, wird das .onloadEreignis nicht ausgelöst.

Wie löse ich eine Warnung aus, wenn ein Bild geladen wurde, unabhängig davon, ob das Bild zwischengespeichert wurde oder nicht?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}
javascript image-loading Oto Shavadze
quelle
6
Mögliches Duplikat des jQuery-Rückrufs beim Laden
Fabrício Matté

Antworten:

151

Legen Sie beim dynamischen Generieren des Bildes die onloadEigenschaft vor dem fest src.

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

Geige - getestet auf den neuesten Firefox- und Chrome-Versionen.

Sie können auch die Antwort in diesem Beitrag verwenden , die ich für ein einzelnes dynamisch generiertes Bild angepasst habe:

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

Geige

Fabrício Matté
quelle
Warten. Warum macht Ihr zweites Codebeispiel das Falsche und setzt es, .srcbevor Sie .onload einstellen? Sie hatten es im ersten Codebeispiel richtig gemacht, aber das zweite durcheinander gebracht. Die zweite Funktion funktioniert in einigen IE-Versionen nicht ordnungsgemäß.
jfriend00
1
@ jfriend00 Nein, kein Durcheinander. Der Sicherungscode (2.) ist genau für den Fall, dass der erste irgendwie nicht mehr funktioniert. =]Es wird .completeüberprüft, ob das Bild bereits zwischengespeichert wurde, daher wurde es vom Code demonstriert. Für die beste Vorgehensweise können Sie natürlich immer die srcBindung aller Handler festlegen.
Fabrício Matté
4
.completeIn diesem Fall gibt es keinen Grund, sich darauf zu verlassen . Stellen .srcSie einfach Ihren Load Handler zuerst ein, bevor Sie ihn einstellen, und er wird NIE benötigt. Ich habe eine Diashow geschrieben, die von Tausenden von Websites in jedem denkbaren Browser verwendet wird, und die erste Technik funktioniert jedes Mal. Es ist nicht erforderlich, jemals zu überprüfen, .completewann ein neues Bild von Grund auf neu erstellt wird.
jfriend00
Okay, danke für das Heads-up, hat die Antwort aktualisiert, um Ihre Argumentation widerzuspiegeln =]. Könnten Sie auch @ jfriend00 überprüfen, ob das Bild im IE geladen wird? Ich frage mich, ob es ein Problem mit meinem Netzwerk oder mit dem IE und dem Image ist.
Fabrício Matté
9
Auch heute habe ich festgestellt, dass das Webkit img.src = ''vor dem Zuweisen eines neuen src benötigt wird, wenn es zuvor verwendet wurde.
Quux
10

Wenn der src bereits festgelegt ist, wird das Ereignis im zwischengespeicherten Fall ausgelöst, bevor Sie den Ereignishandler überhaupt gebunden haben. Sie sollten das Ereignis also auch basierend auf auslösen .complete.

Codebeispiel:

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

Für diese Art von Situationen gibt es zwei mögliche Lösungen:

  1. Verwenden Sie die in diesem Beitrag vorgeschlagene Lösung

  2. Fügen Sie dem Bild ein eindeutiges Suffix hinzu, um das srcerneute Herunterladen durch den Browser zu erzwingen:

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

In diesem Code wird jedes Mal, wenn Sie am Ende der Bild-URL einen aktuellen Zeitstempel hinzufügen, diese eindeutig und der Browser lädt das Bild erneut herunter

Haynar
quelle
44
Alles, was dies tut, ist das Caching zu besiegen. Es ist der falsche Weg, um dieses Problem zu lösen. Der richtige Weg ist in Fabricios Antwort. Legen Sie einfach den .onloadHandler fest, bevor Sie den .srcWert festlegen, und Sie werden das Onload-Ereignis in einigen IE-Versionen nicht verpassen.
jfriend00
1
Ja, Sie haben Recht, aber das Zwischenspeichern ist nicht immer wünschenswert. Manchmal sollten Bilder nicht zwischengespeichert werden. Natürlich hängt es in dieser besonderen Situation von den Bedürfnissen ab
Haynar
1
In meiner eckigen App habe ich alles versucht, was andere Antworten sagen, aber nicht geholfen. Aber das Zwingen, nicht wie in dieser Antwort zwischenzuspeichern, hat für mich funktioniert. Also plus eins von mir.
Thanu
Die einzige Lösung, die in der neuesten Version von Chrome für mich funktioniert hat.
Junge Bob
3

Ich habe heute das gleiche Problem getroffen. Nachdem ich verschiedene Methoden ausprobiert habe, stelle ich fest, dass das Einfügen des Codes für die Größenbestimmung $(window).load(function() {})anstelle von document.readyeinen Teil des Problems lösen würde (wenn Sie die Seite nicht ajaxen).

user9319
quelle
Dies ist auch eine gute Antwort für die Situation, in der der Browser das Bild zwischengespeichert hat und mit dem Laden des Fensters einwandfrei funktioniert
Shocker
genau das Problem, mit dem ich konfrontiert war. Ändern, $(document).readyum $(window).loadmein Problem zu lösen.
Tariqul Islam
0

Ich habe festgestellt, dass Sie dies einfach in Chrome tun können: 

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

Wenn Sie die .src auf sich selbst setzen, wird das Onload-Ereignis ausgelöst.

Noah Ellman
quelle