Dynamisch erzeugtes Bild wird zweimal angefordert, wenn jQuery in Google Chrome geladen wird

Question

Ich habe einen Ashx-Dateihandler, der meine Bilder generiert.

<img src="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" /> 

Das alles funktioniert gut.

Jetzt möchte ich Lazy Loading verwenden. Mit diesem jquery lazy loading plugin

So ich so meine HTML-Bilder eingestellt:

<img src="imageplaceholder.gif" original-data="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" /> 

und hinzugefügt, um das folgende Skript:

$(function() { 
    $("img").lazyload(); 
}); 

ich in der Registerkarte Netzwerk von Google Chrome devoloper Tools bemerkt, dass es zwei Aufrufe an diesen Dateihandler.

Ich habe hier eine Testgeige erstellt: link Wenn Sie auf dieser Geige nach unten scrollen, werden zwei Bildanforderungen angezeigt, wenn das Bild in Google Chrome geladen wird. In Firefox und IE funktioniert dies mit nur einem Anruf.

Gibt es eine Möglichkeit, dieses Verhalten zu vermeiden?

UPDATE:

Die folgenden Header in der Datei-Handler festgelegt sind:

[0] "Server" "Microsoft-IIS/7.5" 
[1] "Set-Cookie" "lang=nl; expires=Tue, 04-Feb-2014 13:08:56 GMT; path=/" 

Und die Verfällt Eigenschaft des Response-Objekts ist:

context.Response.Expires = 0 

Answer 1

Ich glaube, das Root-Problem besteht darin, dass Chrome das Bild nicht zwischenspeichert.In dieser demo stellt Chrome jedes Mal eine neue Anfrage aus, wenn Sie auf die Schaltfläche klicken.

Das Lazy Load-Skript löst 2 Anfragen aus, da es zuerst (vor) das Bild in ein privates img-Element lädt und dann die Bild-URL dem ursprünglichen img-Element zuweist.

Ich schlage vor, das Hinzufügen eines Expires oder Cache-Control-Header und ein Last-Modified oder ETag Header, auf die Antwort von Ihrem Bild-Handler so, dass Chrome wird das Bild zwischenzuspeichern. (Weitere Informationen über Caching finden Sie im Caching Tutorial for Web Authors and Webmasters.)

---

Update: ich das Hinzufügen empfehlen, so etwas zu Ihrem Bild-Handler (von MSDN):

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); 
Response.Cache.SetCacheability(HttpCacheability.Public); 
Response.Cache.SetValidUntilExpires(true); 

Answer 2

Es scheint, dass Google Chrome Griffe $("img").attr("src", "") anders als andere Browser.

Mit Blick auf den Quellcode des Plugins on GitHub, und das Hinzufügen einer Bruchstelle in Chrome (Schritt für Schritt zu gehen), die Anrufe an die Bild Handler tritt auf, wenn es das Attribut des Bildes auf den Wert von original-datasrc modifiziert.

Während es möglich ist, dass der Bild-Handler ist das Problem (wie ich kommentierte vor), die Lösung, die ich gefunden line 115 of the plugin's source von

.attr("src", $self.data(settings.data_attribute)); 

zu

.attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="); 

den neuen Wert zu ändern ist eine Base64-codierte Zeichenfolge für ein 1px by 1px transparentes GIF-Bild.

In Ihrem Test fiddle, finden in der verkleinerten Version der 2. Auftreten von

c.data(h.data_attribute) 

und ändern Sie es in

"data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 

Es wird noch zweimal anrufen, aber der erste Anruf vernachlässigbar (0kb ?) und andere Browser sind von dieser Änderung nicht betroffen.