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

Question

I am running a online photography portfolio and sometimes, 1 or 2 images on a page fails to load. and refreshing will display the failed to load image.

Scenario: I click on the link and the images start to load. but the page never finishes loading because one of the images fails to load. After a refresh, the browser loads the failed image as a good image. Only a ctrl+F5 can clear the cached failed image.

Planned solution: I want to detected images that did not finish loading after 10secs and reload them dynamically using javascript/jquery.

I have found a way to force the browser to reload the image by adding a dummy unique querystring behind the src="image.jpg?id=dummyNo". But I have no idea how to detect which image has not finished loading, so that i can reload them.

Is it possible to do this?

well on the sidenote, i'd like to learn about website compression and image (load time) optimising, where would be a good place for me to read up?

Answer 1

@Pointy and @Gaby are right in their comments. Still I was curious about how to accomplish this.

This is what I came up with for what it's worth. Untested, though.

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