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