Html 动态img（或视频）标签不'；根本无法加载资源，HTTP请求是；待决“；

我尝试使用

img

或

video

HTML标记加载到web应用程序中的资源遇到了一些问题

我为我的应用程序使用angular，并使用

ng src=“{{src}}”

指令动态设置

img

标记的

src

参数。 要加载的图像和资源不多（在我目前测试的模型上，它加载了大约30个图像或视频），但浏览器（在Windows和OSX上的Chrome和Firefox上测试）似乎不能正确处理那么多并行请求，并且请求在Chrome上显示为“挂起”，并且在Firefox上不显示任何状态

在我拍摄这些截图时，没有其他正在运行的请求。我一直都有这个问题，但几乎每次刷新页面时，正确请求和挂起请求的数量都会发生变化

资源URI当然是正确的，我可以在另一个选项卡中打开图片，没有问题

如果它可能有任何相关性，即使看起来请求似乎不是从浏览器发送的，也会从Azure blob存储加载资源，并且正确设置CORS选项

当我在本地测试我的应用程序（使用localhost作为主机名）和将其托管在web服务器上时，都会出现问题

你知道为什么会发生这个问题吗？我怎样才能解决它

---

谢谢

我终于找到了问题的根源

我用带有

preload=“metadata”

属性的

video

标记加载了几个视频。它导致许多连接启动，而且似乎即使预加载完成，也会阻止发送对其他资源的请求。我认为这是一个浏览器错误，它不应该是理想的行为

---

使用视频标签上的

preload=“none”

，我没有任何类似的问题。

浏览器通常对同时并行打开到同一主机的连接数有限制。是否有其他连接打开，例如长时间轮询通知，或您已获取但无法关闭连接的内容？你能在netstat等中看到打开的连接吗。？你可以尝试在配置中增加这个数字，看看是否可以解决这个问题，尽管你显然不能期望你的用户这样做。如果我没有遗漏什么，就没有其他连接打开，这就是为什么我对这个问题感到非常惊讶，因为我知道浏览器有这个限制。这不是我的解决方案，我不能牺牲视频预览图像和快速视频启动。我在这里描述了解决方案：