Hình ảnh được tạo động được yêu cầu hai lần khi sử dụng tải chậm jquery trong Google Chrome

Question

Tôi có trình xử lý tệp ashx tạo hình ảnh của mình.

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

Tất cả đều hoạt động tốt.

Bây giờ, tôi muốn sử dụng tải chậm. Sử dụng này jquery lazy loading plugin

Vì vậy, tôi điều chỉnh hình ảnh html của tôi như thế này:

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

Và thêm đoạn mã sau:

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

tôi nhận thấy trong tab mạng của google công cụ chrome devoloper rằng có hai cuộc gọi đến trình xử lý tệp này.

Tôi đã tạo một fiddle thử nghiệm tại đây: link Nếu bạn cuộn xuống trên fiddle này, bạn sẽ thấy hai yêu cầu hình ảnh khi hình ảnh được tải trong Google Chrome. Trong Firefox và IE, thao tác này chỉ hoạt động với một cuộc gọi.

Có cách nào để tránh hành vi này không?

UPDATE:

Các tiêu đề sau đây được đặt trong file handler:

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

Và Hết hạn tài sản của đối tượng Response là:

context.Response.Expires = 0 

Answer 1

Tôi tin rằng vấn đề gốc là Chrome không lưu vào bộ nhớ cache hình ảnh.Trong số demo này, Chrome sẽ đưa ra yêu cầu mới mỗi khi bạn nhấp vào nút.

Kịch bản tải chậm kích hoạt 2 yêu cầu vì trước tiên (trước) tải hình ảnh vào phần tử img riêng, sau đó gán URL hình ảnh cho phần tử img gốc.

Tôi đề nghị thêm một Expires hoặc Cache-Control tiêu đề, và một Last-Modified hoặc ETag tiêu đề, để phản hồi từ xử lý hình ảnh của bạn để Chrome sẽ bộ nhớ cache hình ảnh. (Để biết thêm về bộ nhớ đệm, xem Caching Tutorial for Web Authors and Webmasters.)

---

Cập nhật: Tôi đề nghị bổ sung thêm một cái gì đó như thế này để xử lý hình ảnh của bạn (từ MSDN):

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

Answer 2

Dường như tay cầm của Google Chrome $("img").attr("src", "") khác với các trình duyệt khác.

Nhìn vào mã nguồn của plugin on GitHub, và thêm một điểm break trong Chrome (đi từng bước), các cuộc gọi đến xử lý hình ảnh xảy ra khi nó đổi src thuộc tính của hình ảnh với giá trị của original-data.

Trong khi nó có thể là bộ xử lý hình ảnh là vấn đề (như tôi nhận xét trước đó), các giải pháp mà tôi thấy được sự thay đổi line 115 of the plugin's source từ

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

để

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

giá trị mới là một chuỗi được mã hóa base64 cho hình ảnh GIF trong suốt 1px x 1px.

Trong thử nghiệm của bạn fiddle, tìm thấy trong phiên bản rút gọn sự xuất hiện lần thứ 2 của

c.data(h.data_attribute) 

và thay đổi nó để

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

Nó vẫn sẽ gọi hai lần nhưng các cuộc gọi đầu tiên sẽ là không đáng kể (0KB ?) và các trình duyệt khác không bị ảnh hưởng bởi thay đổi này.