Oto Schawadse
Ich möchte eine Warnbox erstellen, nachdem ein Bild geladen wurde, aber wenn das Bild im Browser-Cache gespeichert wird, wird die .onload Ereignis wird 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 = "https://stackoverflow.com/questions/12354865/img.jpg";
img.onload = function () {
alert("image is loaded");
}
Fabrício Matté
Wenn Sie das Bild dynamisch generieren, legen Sie die onload Eigentum vor dem src.
var img = new Image();
img.onload = function () {
alert("image is loaded");
}
img.src = "https://stackoverflow.com/questions/12354865/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 = "https://stackoverflow.com/questions/12354865/img.jpg";
Warte ab. Warum macht Ihr zweites Codebeispiel das Falsche und set .src vor dem Setzen von .onload? Im ersten Codebeispiel hatten Sie alles richtig gemacht, aber im zweiten haben Sie es vermasselt. Der zweite wird in einigen Versionen von IE nicht richtig funktionieren.
– jfriend00
10. September 2012 um 16:42 Uhr
@ jfriend00 Nein, kein Durcheinander. Der Sicherungscode (2.) ist genau für den Fall, dass der erste irgendwie nicht mehr funktioniert. =] Es nutzt a .complete Überprüfen Sie, ob das Bild bereits zwischengespeichert wurde, daher hat der Code es demonstriert. Für die beste Vorgehensweise können Sie natürlich immer die festlegen src nach allen Handlern verbindlich.
– Fabrício Matté
10. September 2012 um 17:21 Uhr
Es gibt einfach KEINEN Grund, sich darauf zu verlassen .complete in diesem Fall. Stellen Sie Ihr Lastaufnahmemittel einfach vor dem Einstellen ein .src und es wird NIE benötigt. Ich habe eine Diashow geschrieben, die von Tausenden von Websites in jedem erdenklichen Browser verwendet wird, und die erste Technik funktioniert jedes Mal. Es besteht keine Notwendigkeit, jemals zu überprüfen .complete wenn Sie so ein neues Bild von Grund auf neu erstellen.
– jfriend00
10. September 2012 um 17:24 Uhr
In Ordnung, danke für die Hinweise, aktualisierte die Antwort, 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 IE und dem Bild ist.
– Fabrício Matté
10. September 2012 um 17:29 Uhr
Auch heute habe ich festgestellt, dass Webkit benötigt wird img.src = '' vor dem Zuweisen einer neuen Quelle, wenn sie zuvor verwendet wurde.
– quux
24. Mai 2014 um 10:53 Uhr
Tom Sarduy
Wenn src bereits festgelegt ist, wird das Ereignis im zwischengespeicherten Fall ausgelöst, bevor der Ereignishandler überhaupt gebunden wird. Sie sollten das Ereignis also basierend auf auslösen .complete Auch.
Codebeispiel:
$("img").one("load", function() {
//do stuff
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
$(this).load();
});
Haynar
Für solche Situationen gibt es zwei mögliche Lösungen:
Fügen Sie dem Bild ein eindeutiges Suffix hinzu src um den erneuten Download des Browsers zu erzwingen, gehen Sie wie folgt vor:
var img = new Image();
img.src = "https://stackoverflow.com/questions/12354865/img.jpg?_="+(new Date().getTime());
img.onload = function () {
alert("image is loaded");
}
In diesem Code machen Sie jedes Mal, wenn Sie den aktuellen Zeitstempel am Ende der Bild-URL hinzufügen, ihn eindeutig und der Browser lädt das Bild erneut herunter
All dies bewirkt, dass das Caching besiegt wird. Es ist der FALSCHE Weg, dieses Problem zu lösen. Der richtige Weg ist in Fabricios Antwort. Stellen Sie einfach die ein .onload Handler vor dem Festlegen der .src Wert und Sie werden das onload-Ereignis in einigen Versionen von IE nicht verpassen.
– jfriend00
10. September 2012 um 16:41 Uhr
Ja, Sie haben Recht, aber es ist nicht immer wünschenswert, zwischenzuspeichern, manchmal sollten Bilder nicht zwischengespeichert werden. natürlich kommt es in dieser besonderen Situation auf die Bedürfnisse an
– haynar
10. September 2012 um 18:19 Uhr
In meiner Winkel-App habe ich alles versucht, was andere Antworten sagen, aber nicht geholfen. Aber zu zwingen, nicht zu cachen, wie diese Antwort sagt, hat für mich funktioniert. Also plus eins von mir.
– Thanu
6. Januar 2016 um 0:21 Uhr
Die einzige Lösung, die für mich in der neuesten Version von Chrome funktioniert hat.
– Junger Bob
28. Februar 2018 um 18:24 Uhr
Benutzer9319
Ich bin heute auf das gleiche Problem gestoßen. Nachdem ich verschiedene Methoden ausprobiert habe, stelle ich fest, dass ich einfach den Größencode hineingeben muss $(window).load(function() {}) anstatt document.ready würde einen Teil des Problems lösen (wenn Sie die Seite nicht ajaxen).
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;
});
Das Setzen von .src auf sich selbst löst das onload-Ereignis aus.
Mögliches Duplikat des jQuery-Rückrufs beim Laden des Bilds (auch wenn das Bild zwischengespeichert ist)
– Fabrício Matté
10. September 2012 um 15:31 Uhr