动态IMG（或视频）标签不加载所有资源，HTTP请求＆QUOT;待决的QUOT; [英] Dynamic img (or video) tags don't load resources at all, HTTP requests are "pending"

问题描述

我有一些问题，我尝试在我的web应用程序中加载，使用 IMG 或资源视频 HTML标签。

I'm having some problems with the resources I try to load on my web application, using img or video HTML tags.

我用的角度为我的应用程序和动态设置 IMG 标签的的src 参数，使用 NG-SRC ={{SRC}}指令。
有没有那么多的图像和资源加载（在我目前正在测试的模型，它加载约30图像或视频），但它似乎像浏览器（在Chrome和Firefox测试在Windows和OSX）不处理正确，许多并行请求，并请求显示为待定在Chrome，并且没有显示出在Firefox上的状态。

I use angular for my app and dynamically set the src param of the img tags, using the ng-src="{{ src }}" directive. There are not that many images and resources to load (on the model I'm currently testing, it loads about 30 images or videos), but it seems like the browsers (tested on Chrome and Firefox on Windows and OSX) don't handle correctly that many parallel requests, and the requests appear as "pending" on Chrome, and does not show any status on Firefox.

在我把这些截图的那一刻，他们没有运行其他请求。我有这个问题所有的时间，但正确的请求和挂起请求的数量几乎每一个我刷新页面时更改。

At the moment I took these screenshots, they were no other requests running. I have this problem all the time, but the number of correct requests and pending requests change almost every time I refresh the page.

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

The resources URIs are of course correct, and I can open pictures in another tab with no problem.

如果它可以是任何的相关性，尽管它似乎并不像请求甚至从浏览器发送的，资源是从Azure的Blob存储加载，并且CORS选项设置正确。

If it can be of any relevance, even though it doesn't seem like the request is even sent from the browser, the resources are loaded from an Azure blob storage, and CORS options are correctly set.

问题双方发生时，我在本地测试我的应用程序（使用localhost作为主机名），当它托管在Web服务器上。

The problem happens both when I test my app locally (with localhost as hostname) and when it is hosted on a web server.

你有没有为什么这个问题发生的任何想法，我该如何解决这个问题？

Have you any idea on why this problem is happening and how I can fix it?

谢谢！

推荐答案

我终于找到了问题的根源！

I finally found what caused the problem!

我有几个视频与视频加载与 preLOAD =元数据属性标记。这引起了许多连接开始，似乎连当preLOAD完成后，将prevented的请求被发送的其它资源。我认为这是一个浏览器错误，它不应该是所需的行为。

I had several videos loading with a video tag with the preload="metadata" attribute. It caused many connections to start, and it seems that even when the preload finished, it prevented the requests for the other resources to be sent. I think it is a browser bug, it should not be the desired behavior.

使用 preLOAD =无上的视频标签，我没有任何问题，这样的。

With preload="none" on the video tags, I don't have any problem like that.

这篇关于动态IMG（或视频）标签不加载所有资源，HTTP请求＆QUOT;待决的QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！