Dynamic img (or video) tags don't load resourc

Question

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

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.

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

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.

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?

Thanks !

Answer 1

I finally found what caused the problem!

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.

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