admin管理员组文章数量:1326280
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?
Share Improve this question asked May 27, 2010 at 16:13 Isen NgIsen Ng 1,4763 gold badges12 silver badges24 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
2 Answers
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);
});
本文标签:
版权声明:本文标题:Is it possible to reload a specific image if it did not finish loading after a preset amount of time? javascriptjquery - Stack O 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742210792a2433672.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论