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

Answer 2

Put below code at end of page:

$('img').error(function(){
  var src= $(this).attr('src');
  if (window.console) {
       console.log('reload image '+ src);
  }
  var i= src.indexOf("&random=");
  if(i > -1) {
     src= src.substring(0,i);
  }
  i = src.indexOf("?random=");
  if(i > -1) {
     src= src.substring(0,i);
  }
  if(src.indexOf('?') > -1 ) {
      src= src+"&random="+ (new Date().getTime());
  } else  {
      src= src+"?random="+ (new Date().getTime());
  }
  $(this).attr('src', src);  
});