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

Question

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

如果您使用的是jQuery，可以尝试使用此插件：

Lazy Load Plugin for jQuery

Answer 4

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