Dynamiczne generowanie obrazu jest wymagane dwukrotnie podczas korzystania z leniwego ładowania jquery w przeglądarce Google Chrome

Question

Mam obsługę plików w formacie ashx, która generuje moje obrazy.

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

Wszystko działa dobrze.

Teraz chcę użyć leniwego ładowania. Stosując ten jquery lazy loading plugin

Więc regulować moje obrazy HTML tak:

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

I dodaje następujący skrypt:

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

zauważyłem na karcie sieciowej google narzędzi chrom devoloper że istnieją dwa wywołania do tego filehandlera.

Stworzyłem testowe skrzypce tutaj: link Po przewinięciu tego skrzypka zobaczysz dwa żądania obrazków, gdy obraz zostanie załadowany do przeglądarki Google Chrome. W Firefox i IE działa tylko z jednym połączeniem.

Czy istnieje sposób na uniknięcie takiego zachowania?

UPDATE:

Następujące nagłówki są ustawione w module obsługi plików:

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

A Wygasa właściwość obiektu Response to:

context.Response.Expires = 0 

Answer 1

Uważam, że głównym problemem jest to, że Chrome nie buforuje obrazu.W tej wersji demo Chrome wyśle ​​nowe żądanie za każdym razem, gdy klikniesz przycisk.

Skrypt leniwy obciążenie wyzwala 2 wnioski, ponieważ pierwszy (pre) ładuje obraz do prywatnej img elementu, to przydziela adres URL obrazu do oryginalnego img elementu.

Proponuję dodanie Expires lub Cache-Control nagłówek, a Last-Modified lub ETag nagłówek, do reakcji ze swojej obsługi obrazu tak, że Chrome będzie buforować obrazu. (Więcej informacji na temat buforowania, zobacz Caching Tutorial for Web Authors and Webmasters.)

---

Aktualizacja: Proponuję dodanie czegoś podobnego do obsługi obrazu (od MSDN):

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

Answer 2

Wydaje się, że uchwyty Google Chrome $("img").attr("src", "") inaczej niż inne przeglądarki.

Patrząc na kod źródłowy wtyczki on GitHub i dodając punkt przerwy w Chrome (idąc krok po kroku), wywołania do obsługi obrazu występuje, gdy modyfikuje atrybut src obrazu do wartości original-data.

Chociaż możliwe jest, że procedura obsługi obraz jest problem (jak zauważył wcześniej), rozwiązanie, które znalazłem zmienić line 115 of the plugin's source z

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

do

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

nowej wartości to łańcuch kodowany base64 dla przezroczystego obrazu GIF 1px na 1px.

W swoim badaniu fiddle, odnaleźć w wersji minified 2nd wystąpienie

c.data(h.data_attribute) 

i zmienić go na

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

będzie nadal dzwonić dwa razy, ale pierwsza rozmowa będzie nieznaczny (0KB ?) i ta zmiana nie ma wpływu na inne przeglądarki.