I believe this is the bug affecting you: https://bugs.chromium.org/p/chromium/issues/detail?id=108055
There’s been discussion about it from 2011-2016, and is ongoing. Basically Chrome can’t handle a very large number of requests in a short period of time.
Here’s what helped a bit for my app:
- You could add an event handler like
img.addEventListener("error",tryAgainLater)but that won’t rescue
the other resources that fail to load, so your script that loading
hundreds of images could interfere with others. - Try to cache more of the images to reduce the number of network requests.
- Use Firefox instead… obviously can’t tell customers that.
Here’s what did not work:
- Compositing the images on to a canvas and discarding the individual images. This did not help because it’s related to the network requests, not the images stored in memory.
- Not starting the next request until the previous image is fully loaded. Perhaps this is because it takes time for the connection to actually close or be removed from memory (or some other resource).
Yet to try:
- Loading the images over HTTP/2 or SPDY where there are many requests but only one connection.
- In your case you could probably inline the images to avoid making requests. Example from https://css-tricks.com/data-uris/ :
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />