L'immagine generata dinamicamente è richiesta due volte quando si utilizza il caricamento lento di jquery in Google Chrome

Question

Ho un gestore di file ashx che genera le mie immagini.

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

Tutto funziona correttamente.

Ora, voglio utilizzare il caricamento lazy. L'utilizzo di questo jquery lazy loading plugin

Così ho regolato le mie immagini html come questo:

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

e ha aggiunto il seguente script:

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

ho notato nella scheda di rete di Google Strumenti di cromo devoloper che ci sono due chiamate fatte a questo filehandler.

Ho creato un violino di prova qui: link Se scorri verso il basso su questo violino vedrai due richieste di immagine quando l'immagine viene caricata in Google Chrome. In Firefox e IE funziona con una sola chiamata.

C'è un modo per evitare questo comportamento?

UPDATE:

le seguenti intestazioni sono impostati nel gestore di file:

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

E la Scade proprietà dell'oggetto Response è:

context.Response.Expires = 0 

Answer 1

Credo che il problema di root sia che Chrome non sta memorizzando l'immagine nella cache.In questo demo, Chrome invierà una nuova richiesta ogni volta che si fa clic sul pulsante.

Lo script di caricamento lazy fa scattare 2 richieste perché prima (pre) carica l'immagine in un elemento privato img, quindi assegna l'URL dell'immagine all'elemento img originale.

ti suggerisco di aggiungere un header Expires o Cache-Control, e un colpo di testa Last-Modified o ETag, per la risposta dal vostro gestore di immagine in modo che Chrome memorizza nella cache l'immagine. (Per maggiori informazioni sulla memorizzazione nella cache, vedere la Caching Tutorial for Web Authors and Webmasters.)

---

Aggiornamento: Suggerisco di aggiungere qualcosa di simile al gestore di immagini (da MSDN):

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

Answer 2

Sembra che le maniglie di Google Chrome $("img").attr("src", "") in modo diverso rispetto ad altri browser.

Guardando il codice sorgente del plugin on GitHub, e l'aggiunta di un punto di rottura in Chrome (andando passo dopo passo), le chiamate al gestore immagine si verifica quando si modifica l'attributo src dell'immagine al valore della original-data.

Mentre è possibile che il gestore immagine è il problema (come ho commentato prima), la soluzione che ho trovato è stato quello di cambiare line 115 of the plugin's source da

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

a

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

il nuovo valore è una stringa codificata in base 64 per un'immagine GIF trasparente da 1px per 1px.

nel test fiddle, trovare in versione minified il 2 ° verificarsi di

c.data(h.data_attribute) 

e modificarlo in

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

Sarà ancora chiamare due volte, ma la prima chiamata sarà trascurabile (0KB ?) e altri browser non sono interessati da questa modifica.