5

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?

Isen Ng
  • 1,307
  • 1
  • 11
  • 23
  • I think your time would be better spent trying to figure out what's wrong with your hosting. It's not normal for images that are actually present at the server to just not load for mysterious reasons. (Also, **10 seconds?!?**) – Pointy May 27 '10 at 16:19
  • as @Pointy mentions, there is something seriously wrong with your server/hosting .. bring it to them and ask them to fix it .. – Gabriele Petrioli May 27 '10 at 16:24

2 Answers2

8

@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
user113716
  • 318,772
  • 63
  • 451
  • 440
  • Very nice solution. You might consider using setInterval instead of setTimeout, and have the handler cancel the timer if the image list is an an empty set. That way you can accommodate the case where the 2nd try didn't work either. – John Wu Oct 02 '13 at 00:05
0

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);  
});
searching9x
  • 1,515
  • 16
  • 16