Динамическое сгенерированное изображение запрашивается дважды при использовании jquery ленивой загрузки в Google Chrome

Question

У меня есть обработчик файла ashx, который генерирует мои изображения.

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

Это все работает нормально.

Теперь, я хочу использовать ленивую загрузку. С помощью этого jquery lazy loading plugin

Так я настроил мой HTML изображение, как это:

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

И добавил следующий скрипт:

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

я заметил в вкладке Сети Google Chrome devoloper инструментов, которые есть два вызова этого обработчика файлов.

Я создал тестовую скрипку здесь: link Если вы прокрутите вниз эту скрипку, вы увидите два запроса изображения, когда изображение загрузится в Google Chrome. В Firefox и IE это работает только с одним вызовом.

Есть ли способ избежать такого поведения?

UPDATE:

следующие заголовки установлены в обработчике файла:

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

И Истекает свойство объекта Response является:

context.Response.Expires = 0 

Answer 1

Я считаю, что проблема с корнем заключается в том, что Chrome не кэширует изображение.В этом demo Chrome выдает новый запрос каждый раз, когда вы нажимаете кнопку.

Скрипт с ленивой загрузкой запускает 2 запроса, поскольку первый (предварительно) загружает изображение в частный элемент img, а затем присваивает URL-адрес изображения исходному элементу img.

Я предлагаю добавление заголовка Expires или Cache-Control, и заголовок Last-Modified или ETag, в ответ от обработчика изображений так, что Chrome будет кэшировать изображение. (Более подробную информацию о кэшировании см Caching Tutorial for Web Authors and Webmasters.)

---

Update: Я предлагаю добавить что-то вроде этого в обработчик изображений (с MSDN):

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

Answer 2

Похоже, что Google Chrome ручки $("img").attr("src", "") иначе, чем другие браузеры.

Глядя на исходный код плагина on GitHub и добавления точки останова в Chrome (шаг за шагом Собирается), звонки на обработчик изображений происходит, когда он изменяет атрибут src изображения к значению original-data.

Хотя возможно, что обработчик изображений является проблемой (как я заметил раньше), то решение, которое я нашел, чтобы изменить line 115 of the plugin's source от

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

к

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

нового значения является кодировкой base64 для прозрачного GIF-изображения 1px на 1px.

В тесте fiddle, найти в уменьшенной версии 2-го появления

c.data(h.data_attribute) 

и изменить его на

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

Это еще называет дважды, но первый вызов будет незначительным (0Kb ?) и другие браузеры не зависят от этого изменения.