HTML 限制图片同时下载

Question

我正在寻找在 SPA 应用程序中限制图像下载的最佳解决方案。

问题：

在慢速网络上，当进入详细信息页面时，会发生大量图像下载，导致浏览器连接最大化，这会破坏（导致无响应）需要连接才能在按钮单击时执行 AJAX 请求的 UI。

我正在寻找一些 HTTP/浏览器 API 来在给定时间限制图像下载。你知道这样的东西存在吗？

我想要的其他方法是能够在单击按钮时终止所有 GET 请求（这也可以解决这个问题）。

我找不到这样的 API。也许将这些图像作为“预取”插入可能是个好主意？

或者我必须“懒惰”地将这些图像加载为<img data-src="url">，然后将它们放到一次最多执行 3 个请求的自定义提取器中？

编辑：发现一些相关问题：

• javascript: cancel all kinds of requests
• How do I abort image <img> load requests without using window.stop()

Answer 1

1. 最好使用 SPA 框架的延迟加载模块/库。例如，这个 React 库似乎被广泛使用：https://github.com/twobin/react-lazyload。 我肯定会使用这种方法。
2. 自己构建一个惰性图像加载器。插入一个占位符图像（或低质量图像），然后将其替换为最终图像。
3. 是的。每个域的并行下载是有限的。但是您可以创建第二个域（=子域）来托管您的图像，这样可以有效地增加并行下载量。 （但当然不是总带宽）。
4. 预加载：就像一个注释：如果您有一个带有大量导航路径/屏幕的大型应用程序，如果您下载用户不会访问的页面（或页面部分）的图像，则可能会浪费资源...我不想这样做，因为移动流量非常昂贵！
5. 查看img标签的“重要性”属性：重要性 表示资源的相对下载重要性。也许这有帮助？但以前从未使用过这个...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

importance 
Indicates the relative download importance of the resource. Priority hints allow the values:
auto: no preference. The browser may use its own heuristics to prioritize the image.

high: the image is of high priority.

low: the image is of low priority.