Fixing .load() In IE For Cached Images

Die .load()-Funktion wird ausgelöst, wenn das Element, auf dem sie aufgerufen wird, vollständig geladen ist. Sie wird häufig bei Bildern verwendet, die möglicherweise noch nicht vollständig geladen sind, wenn das JavaScript ursprünglich ausgeführt wird, und somit falsche Informationen über sich selbst liefern würden (z. B. Höhe/Breite). Die meisten Browser handhaben dies problemlos. IE kann Probleme verursachen, wenn Bilder auf der Seite zwischengespeichert werden.

Das Bild auswählen und das src-Attribut ändern, um einen zufälligen Parameter (basierend auf dem Datum) anzuhängen. Dies wird IE dazu bringen, die .load()-Funktion ordnungsgemäß auszulösen.

myImge = $("<img />")
   .attr("src",anyDynamicSource+ "?" + new Date().getTime());

Jetzt funktioniert die .load()-Funktion, auch in IE

$(myImge).load(function() {
   alert("will alert even in IE")
});

Siehe den ersten Kommentar für eine Warnung bezüglich der Verwendung dieser Technik mit einem CDN.

Kommentare

John Jimenez

# März 19, 2010

Diese Methode kann einige CDN-Server erheblich belasten. Durch das Aufrufen des Bildes mit '[was auch immer für eine Zufälligkeit Sie wünschen]' erstellen Sie eine Kopie dieser Datei, die sich mit dieser zusätzlichen Zufälligkeit als Dateiname auf dem Server-Farm ausbreitet.

someImg.jpg -> someImg.jpg wird an das CDN weitergeleitet.
someImg.jpg?20100318000302 -> someImg.jpg?20100318000302 wird an das CDN weitergeleitet.
someImg.jpg?20100318000303 -> someImg.jpg?20100318000303 wird an das CDN weitergeleitet.

Bei kleineren Websites, die kein CDN verwenden, mag dies eine akzeptable Methode sein, aber sie ist keine praktikable Option für High-End-Websites (CNN.com, PGATOUR.com, NBA.com usw.).

Antworten

Eliazer

Permalink to comment# März 19, 2010

Danke, welche Lösung würden Sie in einem solchen Fall vorschlagen?

Nochmals vielen Dank.
John Jimenez

Permalink to comment# März 23, 2010

Entschuldigen Sie, Eliazer, ich habe für diesen Fall immer noch keine Lösung.
Ich habe dies nur erwähnt, um darauf hinzuweisen, da mein Team für die Anwendung dieser Methode stark kritisiert wurde, und ich anderen helfen wollte, sie nach Möglichkeit zu vermeiden.

Mark

# März 21, 2014

Um das Brechen des Caching und von CDNs zu vermeiden, füge ich die MD5-Summe des Bildes als Parameter hinzu. Dies hilft auch, Browser dazu zu bringen, zwischengespeicherte CSS-Dateien zu aktualisieren. Hier ist ein Beispiel für einen zwischengespeicherten CSS-Link, der von PHP ausgegeben wird. Bildlinks sollten auf die gleiche Weise konstruiert werden.

<?php
    // returns the URL with its MD5 appended as a variable (used to force browsers to update their cached stylesheets)
    function AppendMD5Variable($url)
    {
        // get the $url's md5
        $md5 = md5_file($url);
        // return the url with the md5 appended as a variable
        return $url.'?md5='.$md5;
    } 
?>
<link rel="stylesheet" href="<?php echo AppendMD5Variable("http://www.somesite.com/wp-content/themes/company/reset.css") ?>" type="text/css" media="all" />

was ausgibt

<link rel="stylesheet" href="http://www.somesite.com/wp-content/themes/company/reset.css?md5=d18499a24db47778f4147ee7a6b84434" type="text/css" media="all" />

Ich hoffe, das hilft jemandem (und ich hoffe, das ist gut formatiert, ich habe noch nie 'Markdown' verwendet).

Justin

# September 21, 2010

jQuery 1.4.2 erledigt das bereits für Sie (jedoch über die $.ajax()-Funktion). Setzen Sie einfach cache : false in die AJAX-Einrichtung, und es sollte für Sie funktionieren.

Antworten

TeMc

Permalink to comment# Dezember 14, 2010

Das hat nichts mit AJAX-Anfragen zu tun, es geht um normale img-Tags und das Auslösen einer Funktion, wenn das Bild geladen ist (d. h. [img onload=this-function /]), und nicht um $(target).load(‘http address’, function(){});, was etwas völlig anderes ist.

jQuery hat mehrere Funktionen mit gleichem Namen, und je nach Kontext kann etwas anderes bedeuten.

wie click() bedeutet, das Click-Ereignis auszulösen, aber click(function(){ }), bedeutet, einen Click-Handler zu binden.

Siehe auch
http://api.jquery.com/load/
http://api.jquery.com/load-event/

Ben

# April 1, 2011

Danke dafür. Ich denke, ich werde in meinem Fall einen etwas anderen Ansatz wählen. Das Problem bei dieser Methode ist, dass Sie alle Vorteile des Bild-Cache in allen anderen Browsern verlieren, und ich möchte nicht die Erfahrung aller anderen beeinträchtigen, nur wegen IE7.

Stattdessen werde ich die .load-Funktion dort belassen, aber auch eine setTimeout-Funktion haben, die dasselbe tut wie load (da es in meinem Fall nur das Entfernen einer Klasse ist, ist das kein Problem). Ich bin sicher, es gibt eine bessere Methode. Irgendjemand?

Antworten

Ben

# April 1, 2011

Oh, ich habe die Antwort hier gefunden

http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

siehe comment-4731

Antworten

Matt

Permalink to comment# Juni 5, 2013

Ausgezeichneter Fund, Ben!!!

Das ist eine viel bessere Lösung. Chris sollte das zu seinem Blog-Beitrag hinzufügen!!!

Es bricht nicht das Caching und funktioniert auch in älteren IE-Versionen.

nme

# Juli 2, 2011

Wie John Jimenez erwähnt hat, wird die gegebene Methode die CDN-Trefferquote erhöhen. Es gibt eine einfachere Methode, dies zu erreichen, hier ist Pseudocode

$('img').each(function() {
    if ($(this).height() > 0) {
       our callback
    } else {
       $(this).load(function() {
         our callback
       });
    }
});

Antworten

Bhanu Pratap

# September 27, 2011

Danke. Jetzt funktioniert es in allen Browsern hervorragend.

var url = any dynamic url;
var img = new Image();
$(“<img/>”) // In-Memory-Kopie des Bildes erstellen, um CSS-Probleme zu vermeiden
.attr(“src”, url+ “?” + new Date().getTime())
.load(function() {
// Irgendwelche Aktionen durchführen
});

Antworten

vishal suri

Permalink to comment# September 3, 2013

Hallo Bhanu Partap, ich brauche deine Hilfe, ich leide unter demselben Problem, kann es aber nicht klar verstehen.

Adam Wadsworth

# Oktober 31, 2011

Ich habe dasselbe Problem, bin mir aber nicht sicher, wo ich mit der Behebung beginnen soll. Könnte mir bitte jemand zwei Minuten Zeit nehmen und sich dieses Problem kurz ansehen?
URL: http://www.media21a.co.uk/development/unknown/

Jede/Alle Hilfe wird gewürdigt, danke.

Antworten

Miro Hristov

# November 5, 2011

Hier ist eine Ein-Zeilen-Lösung, die Sie anstelle von $(‘img’).load(function(){ //// }); verwenden können.


$('img').each(function(){  this.src = this.src + '?random=' + (new Date()).getTime()}).load(function(){
 alert("will alert even in IE")
});

Antworten

Rytis Lukoševičius

# März 14, 2012

Ich hatte mit diesem Problem auf einer der von mir erstellten Websites zu kämpfen, und tatsächlich gibt es einen etwas besseren Weg, dies zu beheben. Es stellt sich heraus, dass der Fehler behoben ist, wenn Sie zuerst "load" hinzufügen und erst danach "src" für das Bild ändern.

Der beste Weg wäre also eigentlich:

$('img').load(function() { ... }).attr('src', 'new_image_source');

Es hat bei mir bei mehreren Durchläufen für dieselben bereits zwischengespeicherten Bilder einwandfrei funktioniert.

Einen schönen Tag noch

Antworten

Gemma D Lou

Permalink to comment# Oktober 3, 2012

Hey Rytis, danke! Das funktioniert jetzt perfekt in IE9, IE8, IE7, Chrome, Mozilla und Safari. :)
Henrique Müller

Permalink to comment# Oktober 31, 2014

Oh Mann. Es ist lange her, seit diese Antwort gegeben wurde, aber sie hat mir immer noch das Leben gerettet!

Danke!
Shafiq

Permalink to comment# Mai 6, 2016

Können Sie mir bitte sagen, wie das in reinem JavaScript geht? Ich habe versucht, die src innerhalb der onload-Funktion zu ändern, das hat immer wieder die Source-URL aufgerufen und das Bild aktualisiert, was sinnvoll ist. Wie kann ich es mit Ihrer Lösung einmal ausführen lassen? Ich habe versucht, eine leere load-Funktion für img hinzuzufügen und dann src zu ändern, das hilft nicht.

Danke

franz

# März 15, 2012

Danke Rytis! Sehr einfach, aber sehr effektiv. Macht irgendwie Sinn ;)

Antworten

Mark

# April 26, 2012

Danke Jesus für die Existenz dieser Seite. Und Props auch an Rytis und Chris.

Antworten

Jet

# Juni 16, 2012

Je nachdem, was Sie tun, tut dies auch den Trick
$('').load(function() { // }).load();
Also ja, in anderen Browsern wird Ihre Funktion möglicherweise zweimal aufgerufen, aber es sollte nicht zu schwer sein, dies zu überprüfen.

Antworten

Reinier Kaper

# Juni 20, 2012

Rytis: Du bist mein Held, Mann!
IE7 bereitete mir Schwierigkeiten damit und ich bevorzugte nicht die Methode, einen Zeitstempel anzuhängen, wegen der zuvor erwähnten Probleme.

Danke!

Antworten

Rytis Lukoševičius

# Juni 20, 2012

Ich bin froh, dass ich helfen konnte :) es hat mir auch meine eigene geistige Gesundheit gerettet :D

Antworten

alex lacayo

# Juni 21, 2012

Respekt an Rytis dafür … das hat bei mir funktioniert


    $('.look-book-wrapper img').each(function() {
	
	   var new_image_source = ($(this).attr('src'));	
 
       $(this).load(function() {
    		$(this).fadeIn('slow');
    	})
    	.attr('src', new_image_source); 
    	//.attr({src: $(this).attr('src') + '?time=' + (new Date()).getTime() });
    });

Antworten

Bjørn T.

# Juli 5, 2012

Rytis: Danke, dass Sie meinen Tag und die wenigen Haare gerettet haben, die mir von all der Frustration übrig geblieben sind.

Antworten

awpross

# Juli 10, 2012

Das ist nicht nur IE-spezifisch. Auch Chrome und mein Android-Handy verhalten sich genauso. Ich setze ein data-Feld auf true, sobald das Bild geladen ist und das Load-Ereignis ausgelöst wird. Nachdem das gesamte Fenster geladen ist, prüfe ich alle Elemente, für die das data-Feld nicht auf true gesetzt wurde, und führe meine Funktion für diese aus. So wird die Funktion nie zweimal pro Bild aufgerufen und sie wird immer ausgelöst, egal ob die Bilder zwischengespeichert sind oder nicht.

$(document).ready(function () {

  $(“#Events img”).each(function (i) {
    $(this).data(“shown”, false);
    $(this).bind(“load”, function () {
      $(this).hide().delay(500 * i).fadeIn(2000); // <– This is my function to call
      $(this).data("shown", true);
    });
  });

  $(window).load(function () {
    $("#Events img").each(function (i) {
      if ($(this).data("shown") == false) {
        $(this).hide().delay(500 * i).fadeIn(2000); // <– This is my function to call
      }
    });
  });

});

Antworten

Gabriel Oliveira

# Juli 15, 2012

Vielen Dank! Es funktioniert großartig!

Antworten

Abolfazl Beigi

# Oktober 18, 2012

Vielen Dank. Nützlich wie immer.

Antworten

Ian Brown

# Oktober 25, 2012

Rytis, du bist der Mann!! Danke.

Antworten

Thanos

# November 8, 2012

Oooo!! Gibt es etwas, das du nicht weißt?
Ich bevorzuge die Lösung von Chris, da sie besser zu meinem Code passt.

Antworten

John

# Januar 24, 2013

Warum packst du es zweimal in jQuery?

myImge = $("")
$(myImge).load(...)

Also ist es äquivalent zu $($("<img />"))

Antworten

Hank

# Februar 5, 2013

Vielen Dank, Nme. Die Überprüfung der Höhe anstelle der Verwendung von load war der richtige Weg, um das Problem mit älteren IE-Versionen zu lösen, die die load-Funktion nicht ein zweites Mal auslösen.
Sie haben mir gerade den Tag gerettet.

Antworten

JR Galia

# Februar 21, 2013

Danke Rytis.

Antworten

Nut315

# Februar 27, 2013

Nur eine Anmerkung zu einigen Antworten. $("#element").load(function() { }); wurde ab jQuery 1.8 als veraltet eingestuft und sollte durch Folgendes ersetzt werden.


$("#element").bind("load", function() { });

Antworten

Raghav

# März 5, 2013

Danke für den Beitrag. Ich hatte genau dasselbe Problem. Ich habe es auf direkte Weise mit Ihrem Code behoben.

Antworten

Lucian Adamson

# März 29, 2013

Ich weiß, dass Browser-Sniffing als schlechte Praxis gilt, aber bei etwas wie diesem, wo die Überprüfung der Unterstützung nicht das ist, was Sie brauchen, denke ich, dass es gerechtfertigt wäre. Wie ein Kommentator zuvor sagte, warum die Caching-Vorteile anderer Leute opfern und deren Erfahrung verlangsamen, nur für die anderen Benutzer, die sich für den verpönten IE-Weg entschieden haben. Sie könnten einfach prüfen, ob der Browser IE ist und diese Methode anwenden, wenn Sie kein CDN verwenden.

Antworten

Patrick

# Juni 6, 2013

Ich glaube, ich habe eine bessere Lösung gefunden, die a) funktioniert, egal wann Sie den onload-Handler anhängen – vor oder nach dem Setzen von src – und b) keine Kopien Ihrer Bilder auf dem Server erstellt.

Es stellt sich heraus, dass Sie dem Bild keinen zufälligen Query-Parameter hinzufügen müssen. Machen Sie einfach Folgendes:

$("img").attr("src", $("img").attr("src"));

Wie Sie sehen, wird das src-Attribut auf denselben Wert gesetzt wie zuvor. Auf diese Weise lädt IE das Bild nicht einmal neu, es löst nur das onload-Ereignis aus, was genau das ist, was wir wollen. :-)

Antworten

vipul

# August 9, 2013

Hier ist eine bessere Lösung mit jQuery.

$("img").one('load', function() { // Ihr Code hier }).each(function() { if(this.complete) { $(this).load(); } });

Antworten

dosporto

# August 26, 2013

Danke. Für mehr Lösungen schauen Sie unter
http://fiverr.com/dosporto/fix-your-javascript-jquery-jquery-mobile-issues

Antworten

Pete Jones

# September 4, 2013

Gibt es einen Vorteil bei der Verwendung eines '#'-Zeichens anstelle eines '?' in der Abfragezeichenfolge? Ich habe Fälle gesehen, in denen ein '#' immer noch das zwischengespeicherte Bild verwendet und nicht ein Cache-brechendes '?' – wie unter http://www.post-hipster.com/2008/10/20/using-javascript-to-refresh-an-image-without-a-cache-busting-parameter/

Antworten

Brad

Permalink to comment# Oktober 10, 2013

Das scheint ein valider Punkt zu sein. Ich kann den verlinkten Artikel nicht lesen, da ich bei der Arbeit bin, aber ich stelle mir vor, dass das '#'-Zeichen weniger störend wäre als ein '?' als Parameter.

MRX

# Oktober 30, 2013

Lösung: https://gist.github.com/paulirish/268257

Antworten

Mark

# November 4, 2013

Hallo, ich muss ein Hintergrundbild für einen Div laden.

<div id="low"></div>
<div id="high"></div>

Wenn ich auf niedrig klicke, muss ich hoch mit Hintergrundbild anzeigen. In Chrome usw. habe ich eine Lösung, aber in IE flackert der Hintergrund des Divs nach dem Klick.

Vielen Dank für Ihren Tipp.

Antworten

thinsoldier

# Oktober 9, 2014

Es scheint, dass Firefox 33 auch unzuverlässig ist, wenn es um Load-Ereignisse für zwischengespeicherte Bilder geht. : (

Antworten

Nabi

# November 7, 2014

Nun, tatsächlich gibt es Wege, zwischengespeicherte Bilder korrekt zu behandeln. Ich habe Tutorials dazu geschrieben

Bilder mit jQuery laden und Ereignisse zur Anzeige von Ladesymbolen verarbeiten

Und wenn Sie natives JavaScript ohne jQuery verwenden möchten, können Sie mein anderes Tutorial ansehen

Bilder mit nativem JavaScript laden und Ereignisse zur Anzeige von Ladesymbolen verarbeiten

Antworten

Mehak Aggarwal

# Mai 19, 2018

Ich kann dieses Problem leicht beheben.

Broxer

Antworten

Kommentare

Leave a Reply Cancel reply