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

check if multiple images loaded within certain timeinterval; if not then replace with other url

本文关键字：如果没有 图像 替换 URL 其他 定时间 是否 加载 检查      更新时间：2023-09-26

问题 - 我在页面上显示一些由某些代理服务器提供的图像。在每页中，我显示 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'));
        }
    });

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

我检查了有关堆栈溢出的其他类似问题，但没有解决方案完美地工作，因为我需要显示多个图像。请指导如何进行。

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

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

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

缺点：

  • 它将等待其他资源，如脚本，样式表和Flash，而不仅仅是图像，这些资源可能对您有用，也可能不合适。
  • 如果图像从缓存加载，某些浏览器可能不会触发事件（包括您的浏览器，这就是您的代码不起作用的原因）

为什么不在图像本身上使用 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事件中替换它，您仍然需要等待，这将需要一点时间，对吗？

那么，现在怎么办！

你可以使用这个很棒的插件！添加引用后，您只需使用以下内容：

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 ;)建议

为所有图像指定一个特定的类。 遍历您的图像并使用 .load（） 检查是否加载，下面的示例...

检测图像加载

相关文章：