雅虎(Yahoo!图像搜索加载其图像

Question

我最近注意到，当你在Yahoo!图像搜索它首先显示低分辨率图像，然后逐渐变成高分辨率图像。

例子:雅虎图片搜索

当你点击上面的链接并点击所有图像时，你会注意到它们总是首先显示低分辨率的图像。他们为什么要这么做?如果他们这样做，网站对用户来说加载速度会更快吗?

另外，有人可以指出我的方向，这实际上是如何完成的(最好是通过使用JQuery，在他们使用JavaScript的情况下)?

Answer 1

他们正在使用这个URL的缩略图缓存

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

其中HASH和NUM(以某种方式)是对特定缩略图的引用。

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

当然，缩略图的文件大小比大图片要小，所以Yahoo!首先从缓存的缩略图中加载，让用户看到图像的内容，然后在背景中加载完整尺寸的图像。

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

让我们假设缩略图图像加载到一个ID为main_image的img标签中，而我们的全尺寸图像加载(在背景中)在一个ID为secondary_image的隐藏img标签中。然后我们绑定#secondary_image的load事件，并在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时调用此函数)。

Answer 2

他们所做的就是首先显示缩略图，然后等待一点(为您和实际站点节省带宽)，然后加载实际图像。要做到这一点，他们可能只是改变图像上的src属性，或者在顶部添加另一个图像。

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