Is it possible to reload a specific image if it did not finish loading after a preset amount of time? javascriptjquery - Stack O

admin管理员组

文章数量:1327259

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 pression and image (load time) optimising, where would be a good place for me to read up?

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 pression and image (load time) optimising, where would be a good place for me to read up?

• javascript
• jquery
• pression

Share Improve this question Follow asked May 27, 2010 at 16:13 Isen NgIsen Ng 1,47633 gold badges1212 silver badges2424 bronze badges 2

• 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 Commented May 27, 2010 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 Commented May 27, 2010 at 16:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

@Pointy and @Gaby are right in their ments. Still I was curious about how to acplish 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

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);  
});

本文标签：