我在尝试使用 imgvideo HTML 标签加载到我的 Web 应用程序上的资源时遇到了一些问题。

我为我的应用程序使用 angular,并使用 src 指令动态设置 img 标签的 ng-src="{{ src }}" 参数。
要加载的图像和资源并不多(在我目前正在测试的模型上,它加载了大约 30 个图像或视频),但似乎浏览器(在 Windows 和 OSX 上的 Chrome 和 Firefox 上测试)无法处理正确的是许多并行请求,并且请求在 Chrome 上显示为“待处理”,并且在 Firefox 上不显示任何状态。

在我截取这些屏幕截图的那一刻,它们没有运行其他请求。我一直有这个问题,但几乎每次刷新页面时,正确请求和待处理请求的数量都会发生变化。

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

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

当我在本地测试我的应用程序(使用 localhost 作为主机名)和当它托管在 Web 服务器上时,都会出现问题。

你知道为什么会发生这个问题以及我如何解决它吗?

谢谢 !

最佳答案

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

我有几个视频加载了带有 video 属性的 preload="metadata" 标签。它导致许多连接启动,似乎即使在预加载完成后,它也阻止了对其他资源的请求。我认为这是一个浏览器错误,它不应该是所需的行为。

使用视频标签上的 preload="none",我没有任何问题。

关于html - 动态 img(或视频)标签根本不加载资源,HTTP 请求是 "pending",我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28111065/

10-10 19:02
查看更多