检查在一定时间间隔内是否加载了多个图像;如果没有，那么用其他网址替换

Question

问题 - 我在页面上显示某些代理服务器提供的图像。在每个页面中，我显示30个图像（6行 - 每行5个）。这里如果由于过载或由于任何其他问题，如果代理服务器无法在6秒内服务器图像（所有图像或其中一些），那么我想用一些其他网址替换未加载的图像网址，以便我可以最后显示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'));
        }
    });

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

我在堆栈溢出时检查了其他类似的问题，但是由于我需要显示多个图像，因此没有任何解决方案能够完美地完成。请指导如何继续。

Answer 1

您不必等待6秒，也不必使用TimeOut。您可以使用onload Javascript / Jquery事件检查图像是否已加载。我知道，发送onerror事件需要一点点，让我们看看：

为什么不在窗口或图像本身上使用load Jquery事件？

$(window).load(function(){
    //check each image
})

<强>缺点：

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

为什么不在图像本身上使用error Jquery事件？

$('img[id^="picThumbImg_"]').error(function(){
       //image loading error
})

<强>缺点：

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

注意：：错误与加载事件

几乎相同

改进代码！：

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

这样可以避免上一段代码中的一些内容，但如果它是404并且您在onerror事件中将其替换掉，那么您仍需要等待，这会花一些时间吗？

那么，现在呢！

您可以使用此awesome plugin！添加引用后，您只需使用以下内容：

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

您的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建议的;）

Answer 2

为您的所有图片提供特定课程。循环浏览您的图像并使用.load（）来检查是否已加载，例如下面......

Detect image load