在 Web 浏览器中优先下载图像的技术

Technique for prioritising image download in web browser

本文关键字：下载图像技术 Web 浏览器更新时间：2023-09-26

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

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

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

加载该页面时，浏览器会将 100 个请求排队以获取这些缩略图。我知道没有办法从请求队列中删除项目。根据浏览器的不同，它最多可以同时请求 6 个（指此线程），但它们仍将在模式对话框的大图像之前排队。您可以做的（来自同一线程）是将模态对话框图像托管在单独的子域上，以便浏览器将它们放入单独的队列中，就好像它们在完全不同的站点上一样。允许该新队列与您的缩略图请求同时运行。

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

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

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

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

用于 jQuery 的延迟加载插件

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