Question

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

问题：

在速度较慢的网络上，进入详细信息页面时，会发生大量图片下载，这些都是浏览器连接最大化的结果，这破坏了UI（使用户无法响应），该UI要求连接在单击按钮时执行AJAX请求。

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

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

我找不到此类API。也许将这些图像作为“预取”插入是个好主意吗？

还是我必须“懒惰”地将这些图像加载为<img data-src="url">，然后将它们放入自定义提取器中，该提取器最多可以同时执行3个请求？

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

Answer 1

Best正在使用SPA Framework的惰性加载模块/库。例如，该React库似乎已被广泛使用：https://github.com/twobin/react-lazyload。 我会坚定地使用这种方法。
自己构建一个懒惰的图像加载器。插入一个占位符图像（或低质量图像），然后将其替换为最终图像。
是的。每个域的并行下载受到限制。但是，您可以在其中托管映像的地方创建另一个域（= Subdomain），这样可以有效地增加并行下载的数量。（但是当然不是总带宽）。
预加载：就像一个注释：如果您的大型应用程序具有许多导航路径/屏幕，那么如果您下载用户无法访问的页面（或页面部分）图像，可能会浪费资源。 ...我不想这样做，因为移动流量非常昂贵！
看看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.

HTML限制同时下载图片

1 个答案: