Ich will das tun:
$("img").bind('load', function() {
// do stuff
});
Das Ladeereignis wird jedoch nicht ausgelöst, wenn das Bild aus dem Cache geladen wird. Die jQuery-Dokumente schlagen ein Plugin vor , um dies zu beheben, aber es funktioniert nicht
jquery
image
jquery-events
jquery-load
Tom Lehman
quelle
quelle
Antworten:
Wenn das
src
bereits festgelegt ist, wird das Ereignis im zwischengespeicherten Fall ausgelöst, bevor Sie den Ereignishandler überhaupt gebunden bekommen. Um dies zu beheben, können Sie das Ereignis.complete
wie folgt überprüfen und auslösen :Beachten Sie den Wechsel von
.bind()
zu,.one()
damit der Ereignishandler nicht zweimal ausgeführt wird.quelle
setTimeout(function(){//do stuff},0)
innerhalb der 'Lade'-Funktion hinzufügen ... die 0 gibt dem Browsersystem (DOM) ein zusätzliches Häkchen, um sicherzustellen, dass alles richtig aktualisiert wird..load()
kein Ereignis auslöst und 1 erforderliches Argument hat, verwenden Sie.trigger("load")
stattdessenKann ich vorschlagen, dass Sie es erneut in ein Nicht-DOM-Bildobjekt laden? Wenn es zwischengespeichert ist, dauert dies überhaupt keine Zeit und die Onload wird immer noch ausgelöst. Wenn es nicht zwischengespeichert ist, wird der Onload ausgelöst, wenn das Image geladen wird. Dies sollte die gleiche Zeit sein, zu der die DOM-Version des Images den Ladevorgang beendet hat.
Javascript:
Aktualisiert (um mehrere Bilder zu verarbeiten und mit korrekt bestelltem Onload-Anhang):
quelle
load
Handler anzuhängen, bevor er hinzugefügt wird. Auch dies funktioniert nicht, aber für ein Bild funktioniert der OP-Code für viele :)#img
ist eine ID, keine Elementauswahl :) Funktioniert auchthis.src
, es ist nicht erforderlich, jQuery dort zu verwenden, wo es nicht benötigt wird :) Aber das Erstellen eines anderen Bildes scheint in beiden Fällen übertrieben zu sein, IMO.imageLoaded
tmp.onload = imageLoaded.bind(this)
Meine einfache Lösung, es benötigt kein externes Plugin und sollte für häufige Fälle ausreichen:
benutze es so:
Zum Einblenden Ihrer Bilder beim Laden können Sie beispielsweise Folgendes tun:
Oder alternativ, wenn Sie einen jquery-Plugin-ähnlichen Ansatz bevorzugen:
und benutze es so:
beispielsweise:
quelle
width
,max-height
und verlassenheight:auto
, ist es oft notwendig , sowohl die Breite und Höhe nur einstellen , wenn Sie das Bild strecken müssen; Für eine robustere Lösung würde ich ein Plugin wie ImagesLoadedMüssen Sie das wirklich mit jQuery machen? Sie können das
onload
Ereignis auch direkt an Ihr Bild anhängen .Es wird jedes Mal ausgelöst, wenn das Bild geladen wurde, aus dem Cache oder nicht.
quelle
onload
Handler ausgelöst, wenn das Bild ein zweites Mal aus dem Cache geladen wird?Sie können diesen Code auch mit Unterstützung für Ladefehler verwenden:
quelle
load
Handler zu setzen und ihn später in dereach
Funktion aufzurufen .Ich hatte gerade dieses Problem selbst und suchte überall nach einer Lösung, bei der ich meinen Cache nicht tötete oder ein Plugin herunterlud.
Ich habe diesen Thread nicht sofort gesehen, also habe ich stattdessen etwas anderes gefunden, das eine interessante Lösung darstellt und (ich denke) es wert ist, hier veröffentlicht zu werden:
Ich habe diese Idee tatsächlich aus den Kommentaren hier erhalten: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
Ich habe keine Ahnung, warum es funktioniert, aber ich habe dies auf IE7 getestet und wo es kaputt gegangen ist, bevor es jetzt funktioniert.
Ich hoffe es hilft,
Bearbeiten
Die akzeptierte Antwort erklärt tatsächlich, warum:
quelle
$image.load(function(){ something(); }).attr('src', $image.attr('src'));
die ursprüngliche Quelle zurückgesetzt.Indem Sie mit jQuery ein neues Bild mit dem src des Bildes generieren und die Lademethode direkt diesem zuweisen, wird die Lademethode erfolgreich aufgerufen, wenn jQuery die Generierung des neuen Bildes abgeschlossen hat. Dies funktioniert für mich in IE 8, 9 und 10
quelle
Eine Lösung, die ich gefunden habe https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (Dieser Code stammt direkt aus dem Kommentar)
quelle
Eine Modifikation des GUS-Beispiels:
Stellen Sie die Quelle vor und nach dem Onload ein.
quelle
src
vor dem Anhängen desonload
Handlers festzulegen. Ein einziges Mal danach reicht aus.Fügen Sie das src-Argument einfach in einer separaten Zeile hinzu, nachdem das img-Objekt definiert wurde. Dies wird den IE dazu bringen, das Lad-Ereignis auszulösen. Es ist hässlich, aber es ist die einfachste Problemumgehung, die ich bisher gefunden habe.
quelle
Ich kann Ihnen einen kleinen Tipp geben, wenn Sie dies möchten:
Wenn Sie dies tun, wenn der Browser Bilder zwischenspeichert, ist es kein Problem, immer img angezeigt zu werden, sondern img unter realem Bild zu laden.
quelle
Ich hatte dieses Problem mit dem Internet Explorer, bei dem die e.target.width undefiniert war. Das Ladeereignis würde ausgelöst, aber ich konnte die Abmessungen des Bildes im IE nicht ermitteln (Chrome + FF funktionierte).
Es stellt sich heraus, dass Sie nach e.currentTarget.naturalWidth & e.currentTarget.naturalHeight suchen müssen .
Wieder einmal macht der IE Dinge auf seine eigene (kompliziertere) Weise.
quelle
Sie können Ihr Problem mit dem JAIL- Plugin lösen, mit dem Sie auch Bilder verzögert laden (was die Seitenleistung verbessert) und den Rückruf als Parameter übergeben können
Der HTML-Code sollte so aussehen
quelle
Wenn Sie eine reine CSS-Lösung wünschen, funktioniert dieser Trick sehr gut - verwenden Sie das Transformationsobjekt. Dies funktioniert auch mit Bildern, wenn sie zwischengespeichert sind oder nicht:
CSS:
HTML:
Codepen Beispiel
Codepen WENIGER Beispiel
quelle