fails to load image with error GET 0()

Question

SITUATION:

My page has about 500 <img> elements that are dynamically generated and populated with image urls from an API request that refreshes the data once per hour.

PROBLEM:

Every few page loads, a good amount of images fail to load the image with error code 0().

WHAT I TRIED:

I also tried putting all the images directly in one of my website's folders and loading them from there and the same behaviour happens.

Some times all images load without any issue, sometimes a good number of them fail to load.

QUESTION:

How can I make sure the images always load ?

P.S.: I checked the image urls when the images fail to load, the urls are correct.

Screenshot attached.

EDIT:

To be clear, my question has most likely nothing to do with the requests themselves since the image urls are properly loaded inside the <img> tags, it's the images that fail to load, not the urls.

Sounds like the server chokes on the five hundred near-simultaneous requests and returns bogus data. — AKX, Jun 27 '18 at 11:33

score 1 · Accepted Answer · answered Jun 27 '18 at 11:45

It might be difficult to figure out why some images sometimes fail to load. One strategy could be to check if all images were loaded.

See: Is it possible to reload a specific image if it did not finish loading after a preset amount of time? javascript/jquery

Here's the sample code from the accepted answer that should work for your scenario:

var images = $('img');  // Get all images. (you'll want to modify the selector
                        //    to work with only the desired images)

images.load(function() {       // Add a load event hander that removes 
    images = images.not(this); //    each image from images once loaded.
});

setTimeout(function(){        // After 10 seconds, iterate over each remaining
    images.each(function() {  //     image, reloading each one
        // reload this image
    });
},10000);  // run after 10 seconds

fails to load image with error GET 0()

1 Answers1