动态img（或视频）标签根本不加载资源，HTTP请求是“待定”

Question

我尝试使用img或video HTML标记在我的网络应用上加载资源时出现问题。

我为我的应用使用angular，并使用src指令动态设置img标记的ng-src="{{ src }}"参数。 没有那么多的图像和资源要加载（在我正在测试的模型上，它加载了大约30个图像或视频），但似乎浏览器（在Windows和OSX上的Chrome和Firefox上测试）无法处理正确地说，许多并行请求，以及请求在Chrome上显示为“待处理”，并且在Firefox上没有显示任何状态。

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

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

如果它可能具有任何相关性，即使看起来甚至没有从浏览器发送请求，也会从Azure blob存储加载资源，并正确设置CORS选项。

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

你知道为什么会出现这个问题以及如何解决这个问题吗？

谢谢！

Answer 1

我终于找到了导致问题的原因！

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

视频标记上显示preload="none"，我不会遇到任何问题。