动态 img(或视频)标签根本不加载资源,HTTP 请求是 "pending"
Dynamic img (or video) tags don't load resources at all, HTTP requests are "pending"
我在尝试使用 img
或 video
HTML 标签加载到我的 Web 应用程序上时遇到一些问题。
我为我的应用程序使用 angular,并使用 ng-src="{{ src }}"
指令动态设置 img
标签的 src
参数。
没有那么多图像和资源要加载(在我目前正在测试的模型上,它加载了大约 30 个图像或视频),但它似乎像浏览器(在 Chrome 和 Firefox [=36= 上测试] 和 OSX) 不能正确处理那么多并行请求,请求在 Chrome 上显示为 "pending",并且在 Firefox 上不显示任何状态。
在我截取这些屏幕截图的那一刻,它们不是其他请求运行。我一直有这个问题,但是每次刷新页面时正确请求和待处理请求的数量几乎都在变化。
资源URI当然是正确的,我可以在另一个标签中打开图片没有问题。
如果它可能有任何相关性,即使看起来请求甚至不是从浏览器发送的,资源都是从 Azure blob 存储加载的,并且 CORS 选项设置正确。
当我在本地测试我的应用程序(使用 localhost 作为主机名)和在 Web 服务器上托管时都会出现问题。
您是否知道为什么会出现此问题以及我该如何解决它?
谢谢!
终于找到问题的原因了!
我有几个视频加载了带有 preload="metadata"
属性的 video
标签。它导致许多连接启动,而且似乎即使预加载完成,它也阻止了对其他资源的请求被发送。我认为这是一个浏览器错误,它不应该是期望的行为。
视频标签上有preload="none"
,我没有遇到这样的问题。
我在尝试使用 img
或 video
HTML 标签加载到我的 Web 应用程序上时遇到一些问题。
我为我的应用程序使用 angular,并使用 ng-src="{{ src }}"
指令动态设置 img
标签的 src
参数。
没有那么多图像和资源要加载(在我目前正在测试的模型上,它加载了大约 30 个图像或视频),但它似乎像浏览器(在 Chrome 和 Firefox [=36= 上测试] 和 OSX) 不能正确处理那么多并行请求,请求在 Chrome 上显示为 "pending",并且在 Firefox 上不显示任何状态。
资源URI当然是正确的,我可以在另一个标签中打开图片没有问题。
如果它可能有任何相关性,即使看起来请求甚至不是从浏览器发送的,资源都是从 Azure blob 存储加载的,并且 CORS 选项设置正确。
当我在本地测试我的应用程序(使用 localhost 作为主机名)和在 Web 服务器上托管时都会出现问题。
您是否知道为什么会出现此问题以及我该如何解决它?
谢谢!
终于找到问题的原因了!
我有几个视频加载了带有 preload="metadata"
属性的 video
标签。它导致许多连接启动,而且似乎即使预加载完成,它也阻止了对其他资源的请求被发送。我认为这是一个浏览器错误,它不应该是期望的行为。
视频标签上有preload="none"
,我没有遇到这样的问题。