Javascript 检查是否在一定的时间间隔内加载了多个图像；如果没有，则替换为其他url

问题-我正在某个代理服务器提供服务的页面上显示一些图像。在每一页中，我显示30幅图像（6行-每行5幅）。这里，如果由于过载或任何其他问题，如果代理服务器无法在6秒内为图像（所有图像或其中一些图像）提供服务器，那么我希望使用javascript将卸载的图像url替换为其他url，以便在最后显示30个图像

我试过的如下

objImg = new Image();
objImg.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';

if(!objImg.complete)
  { 
     alert('image not loaded');
  }else{
     img.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';
  }

我还尝试了以下代码

$('img[id^="picThumbImg_"]').each(function(){
        if($(this).load()) {
            //it will display loaded image id's to console
            window.console.log($(this).attr('id'));
        }
    });

我无法为每个图像使用设置超时，因为它将延迟所有页面加载

---

我检查了关于堆栈溢出的其他类似问题，但没有一个解决方案完全适合我，因为我需要显示多个图像。请指导如何继续。

为所有图像指定一个特定的类。循环浏览图像并使用.load（）检查是否已加载，示例如下

---

您不必等待6秒，也不必使用超时。您可以使用

onload

Javascript/Jquery事件检查图像是否已加载。我知道，发送

onerror

事件需要一点时间，让我们看看：

为什么不在窗口或图像本身上使用

load

Jquery事件？ 劣势：

• 它将等待其他资源，如脚本、样式表和flash，而不仅仅是图像，这些对您来说可能是好的，也可能不是好的
• 如果图像从缓存加载，某些浏览器可能无法触发事件（包括您的浏览器，这就是代码无法工作的原因）

为什么不在映像本身上使用

error

Jquery事件？ 缺点：

• 它在跨浏览器中无法稳定工作，也不可靠
• 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发
• 它不能正确地在DOM树上冒泡
• 对于已经存在于浏览器缓存中的图像，可以停止激发

注意：：错误与加载事件几乎相同

改进代码！： 这将避免前面代码中的一些事情，但是如果它是404，并且您要在

onerror

事件中替换它，您仍然需要等待，这需要一点时间，对吗

那么，现在怎么办！ 你可以用这个！。添加引用后，只需使用以下内容：

var imgLoad = imagesLoaded('#img-container');
imgLoad.on( 'always', function() {
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    if(!imgLoad.images[i].isLoaded){
       //changing the src
       imgLoad.images[i].img.src = imgLoad.images[i].img.getAttribute("data-src2");
    }
  }
});

var imgLoad=imagesLoaded（'img container'）；
imgLoad.on（'always'，function（）{
//检测哪个图像被破坏
对于（变量i=0，len=imgLoad.images.length；i

您的HTML标记应该如下所示：

<div id="img-container">
    <div class="row">
        ...
    </div>
    <div class="row">
        <img src="original-path.jpg" data-src2="alternative-path.jpg">
        ...
    </div>
    <div class="row">
        ...
    </div>
</div>

...
...
...

---

注意：在这种情况下，您不需要jQuery，这个插件是Paul Irish建议的；）

检查

错误

方法图像加载程序如何。这将处理批量加载和错误。@RealityDysfunction-您正在检测图像何时加载。我的问题不同。如果在6秒内未加载任何图像，则从其他src加载图像。还要注意的是，我需要加载多个图像（页面中有30个）。有一个超时功能，给它6秒，你应该是好的。听起来不错，但是我们在考虑多媒体代理服务器慢的情况下的时间间隔，或者它会考虑这个延迟吗？实际上我和你的第一行混淆了。我需要在6秒后被调用的函数中使用它。@virus:我不确定。。。试试看，让我知道；）谢谢你的帮助。我的任务完成了。

$('img[id^="picThumbImg_"]').one('error', function() {
   // image load error
}).each(function() {
   if(!this.complete) $(this).error();
});

var imgLoad = imagesLoaded('#img-container');
imgLoad.on( 'always', function() {
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    if(!imgLoad.images[i].isLoaded){
       //changing the src
       imgLoad.images[i].img.src = imgLoad.images[i].img.getAttribute("data-src2");
    }
  }
});

<div id="img-container">
    <div class="row">
        ...
    </div>
    <div class="row">
        <img src="original-path.jpg" data-src2="alternative-path.jpg">
        ...
    </div>
    <div class="row">
        ...
    </div>
</div>