雅虎怎么样？图像搜索加载其图像？

Question

我刚刚注意到当您点击Yahoo!上的图片时图像搜索首先显示低分辨率图像，然后逐渐变为高分辨率图像。

示例： Yahoo! Image Search

当您点击上面的链接并点击所有图片时，您会发现他们始终首先显示低分辨率图像。他们为什么要这样做？如果用户以这种方式执行此操作，网站是否会更快地加载到用户？

此外，有人可以请指出我实际完成的方向（最好是使用JQuery，如果他们使用JavaScript来做）？

Answer 1

他们正在使用此网址的缩略图缓存

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

其中HASH和NUM是（某种程度上）对特定缩略图的引用。

例如，NUM = 1148286928700和HASH = d2f4bbf91a853cefbc18794b6eb9ecdd是对this thumbnail的引用。

当然，缩略图的文件大小比较大的图像小，所以Yahoo!首先从缩略图缓存加载，以便用户瞥见图像的内容，并在后台加载完整大小的图像。

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

我们假设缩略图图片已加载到ID为src的{​​{1}}标记中，我们的完整尺寸图片正在隐藏img标记中加载（在后台） ID为main_image。然后我们绑定img的{​​{1}}事件，并在加载时替换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')); } src替换为大图片，并再次绑定#main_image事件（理想情况下，您将使用上述代码创建一个函数，并在您更改src #secondary_image时调用此函数。

Answer 2

他们所做的只是首先显示a thumbnail，然后稍等一下（为你和真实网站节省带宽）然后加载the real image。要做到这一点，他们可能只是更改图像上的src属性，或者在顶部添加另一个图像。

有趣的是请注意拇指由Bing提供。