我在尝试使用 img
或 video
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/