雅虎怎么样！图片搜索加载它的图片？

Posted 2023-03-25

【中文标题】雅虎怎么样！图片搜索加载它的图片？

【英文标题】：How does Yahoo! Image Search load its images?

【发布时间】：2011-09-17 09:24:30

【问题描述】：

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

示例： Yahoo! Image Search

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

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

【问题讨论】：

我相信PNG有这样的支持，但我怀疑他们在这里使用它。

这是一个interlaced PNG，但不是这里发生的事情。

【参考方案1】：

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

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

HASH 和 NUM 是（不知何故）对特定缩略图的引用。

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

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

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

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

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

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

【讨论】：

哇，非常感谢 Alex 提供的详细信息！欣赏它。还有一件事，不是一定要$('#main_image').attr('src', $(this).attr('src'));吗？

【参考方案2】：

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

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

【讨论】：

谢谢，丰富！不是因为雅虎在使用 Bing 的搜索引擎吗？