如果在预设的时间后没有完成加载，是否可以重新加载特定图像？ 使用Javascript / jQuery的

我正在运行在线摄影作品集，有时，页面上的1或2张图像无法加载。 并刷新将显示无法加载图像。

场景：我点击链接，图像开始加载。 但页面永远不会完成加载，因为其中一个图像无法加载。 刷新后，浏览器将失败的图像加载为良好的图像。 只有ctrl + F5才能清除缓存的失败图像。

计划的解决方案：我希望检测到10secs后未完成加载的图像，并使用javascript / jquery动态重新加载它们。

我找到了一种方法来强制浏览器通过在src =“image.jpg？id = dummyNo”后面添加一个虚拟的唯一查询字符串来重新加载图像。 但我不知道如何检测哪个图像没有完成加载，以便我可以重新加载它们。

是否有可能做到这一点？

在旁注，我想了解网站压缩和图像（加载时间）优化，哪里是我阅读的好地方？

Answer 1

@Pointy和@Gaby的评论是正确的。 我仍然很好奇如何实现这一目标。

这就是我想出的价值所在。 但是未经测试。

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

将以下代码放在页面末尾：

 $('img').error(function(){ var src= $(this).attr('src'); if (window.console) { console.log('reload image '+ src); } int 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); });