7

我有一个生成图像的 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();
});

我注意到在谷歌浏览器开发工具的网络选项卡中，对该文件处理程序进行了两次调用。

我在这里创建了一个测试小提琴：链接 如果你在这个小提琴上向下滚动，当图像加载到谷歌浏览器中时，你会看到两个图像请求。在 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
4

3 回答 3

10

我认为根本问题是 Chrome 没有缓存图像。在这个演示中，Chrome 会在你每次点击按钮时发出一个新的请求。

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

我建议在图像处理程序的响应中添加一个ExpiresorCache-Control标头和一个Last-ModifiedorETag标头，以便 Chrome 缓存图像。（有关缓存的更多信息，请参阅Web 作者和网站管理员的缓存教程。）

更新：我建议在您的图像处理程序中添加这样的内容（来自MSDN）：

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetValidUntilExpires(true);
于 2013-02-04T10:33:12.313 回答
5

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

于 2018-10-31T12:49:41.853 回答
3

Google Chrome 的处理方式似乎$("img").attr("src", "")与其他浏览器不同。

在 GitHub 上查看插件的源代码，并在 Chrome 中添加断点（逐步进行），对图像处理程序的调用发生在它将src图像的属性修改为original-data.

虽然图像处理程序可能是问题（正如我之前评论过的），但我发现的解决方案是line 115将插件的源代码从

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

到

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

新值是 1px x 1px 透明 GIF 图像的 base64 编码字符串。

在您的测试小提琴中，在缩小版中找到第二次出现

c.data(h.data_attribute)

并将其更改为

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

它仍然会调用两次，但第一次调用可以忽略不计（0kb？），其他浏览器不受此更改的影响。

于 2013-01-31T23:04:04.387 回答