2

我最近才注意到，当您单击 Yahoo! 上的图像时 图像搜索它首先显示低分辨率图像，然后逐渐变成高分辨率图像。

示例： 雅虎！图片搜索

当您单击上面的链接并单击所有图像时，您会注意到它们总是首先显示低分辨率图像。他们为什么这样做？如果用户这样做，网站是否似乎加载速度更快？

另外，有人可以指出我实际上是如何完成的（最好使用 JQuery，如果他们使用 JavaScript 来做到这一点）？

4

2 回答 2

2

他们正在使用来自该 URL 的缩略图缓存

http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH

whereHASH和NUM是（以某种方式）对特定缩略图的引用。

例如，NUM = 1148286928700和是对此缩略图HASH = d2f4bbf91a853cefbc18794b6eb9ecdd的引用。

当然，缩略图的文件大小比大图像要小，所以 Yahoo! 首先从缩略图缓存中加载，让用户了解图像是什么，然后在后台加载全尺寸图像。

我怀疑他们使用的技术是将图像加载到隐藏img标签中，然后load将该图像标签的事件绑定到将缩略图替换src为全尺寸图像的函数src。因此，当加载（隐藏的）全尺寸图像时，它会替换我们在页面加载时看到的缩略图。

假设缩略图加载到imgID 为 的标签中main_image，而我们的全尺寸图像（在后台）加载到imgID 为 的隐藏标签中secondary_image。然后我们绑定到 的load事件，并在加载#secondary_image时替换 的src：#main_image

$('#secondary_image').load(function() {
  // on big image load, replace the src of the thumbnail image
  $('#main_image').attr('src', $(this).attr('src'));
}

然后，当用户希望查看另一张图片时，我们将srcof替换#main_image为不同的缓存缩略图，将srcof替换#secondary_image为大图像，然后load再次绑定事件（因此理想情况下，您可以使用上述代码创建一个函数，并调用它每当您更改#secondary_image src.

于 2011-09-17T09:41:10.557 回答
1

他们所做的只是先显示缩略图，然后稍等片刻（为您和真实站点节省带宽）然后加载真实图像。为此，他们可能只是更改图像上的 src 属性，或者在顶部添加另一个图像。

有趣的是，拇指是由 Bing 提供的。

于 2011-09-17T09:40:26.873 回答