javascript - 在网络浏览器中优先下载图像的技术

Question

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

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

关于解决这个问题的任何想法？

Answer 1

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

Answer 2

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

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

Answer 3

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

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

用于 jQuery 的延迟加载插件

Answer 4

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