在Google Chrome中使用jquery延迟加载时,请求动态生成的图像两次

Question

我有一个生成我的图像的ashx文件处理程序.

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

一切正常.

现在,我想使用延迟加载.使用这个jquery延迟加载插件

所以我调整了我的html图像:

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

并添加了以下脚本:

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

我注意到在谷歌Chrome devoloper工具的网络选项卡中,有两个调用此文件处理程序.

我在这里创建了一个测试小提琴:链接 如果您向下滚动此小提琴,您将在Google Chrome中加载图像时看到两个图像请求.在Firefox和IE中,这只能使用一个调用.

有什么方法可以避免这种行为吗？

更新:

在文件处理程序中设置以下标头:

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

并且Response对象的Expires属性是:

context.Response.Expires = 0

Answer 1

我认为根本问题是Chrome没有缓存图像.在此演示中,Chrome会在您每次点击按钮时发出新请求.

延迟加载脚本会触发2个请求,因为它首先(预先)将图像加载到私有img元素中,然后将图像URL分配给原始img元素.

我建议您在图片处理程序的响应中添加一个Expires或Cache-Control标题以及一个Last-Modified或ETag标题,以便Chrome可以缓存图片.(有关缓存的更多信息,请参阅Web作者和网站管理员的缓存教程.)

更新:我建议将这样的内容添加到您的图像处理程序(来自MSDN):

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

Answer 2

发生此类情况时，请确保您没有打开 Chrome DevTools 并勾选“禁用缓存”复选框。如果任何插件、设置或其他任何因素导致缓存被禁用，同样的事情也可能发生。