优先在网络浏览器中下载图像的技巧

Question

我有一个包含许多缩略图（大约100）的网页。当你点击其中一个缩略图时，会创建一个模式弹出窗口，这实际上是一个iframe中的新网页。这个新的网页包含1个大图像。

当用户在所有100多个缩略图在父页面上完成下载之前打开弹出窗口时会出现问题。用户现在必须等待很长时间才能看到弹出窗口中的大图像，因为浏览器不知道在已经尝试检索的缩略图上方优先考虑这个新图像。

有关解决此问题的任何想法？

Answer 1

当装载页面时，浏览器排队为这些缩略图100个请求。我不知道从请求队列中删除项目。根据浏览器的不同，它可能会同时请求最多6个（参见this thread），但它们仍会在模态对话框的大图像之前排队。你可以做什么（从同一个线程）将模态对话框图像托管在一个单独的子域中，以便浏览器将它们放入单独的队列中，就好像它们位于完全不同的站点上一样。该新队列将被允许与缩略图请求同时运行。

Answer 2

有趣的问题。我从来没有遇到过这种情况。想到的解决方法是仅在用户查看缩略图时才加载缩略图。

如果您正在使用jQuery，你可以尝试使用这个插件：

Lazy Load Plugin for jQuery

Answer 3

解决此问题的一种方法是将您的小缩略图合并为一个大平铺图像，从而减少页面上的图像数量。

Answer 4

您可以对所有小图像使用BASE64数据URI。 您的页面可能变得更大，但在某些安装中 - 整个页面加载速度变得更快。

其他选项 - 从其他子域加载大图像，因为“队列”是通过主机名。