3

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

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

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

4

2 回答 2

1

您不必等待 6 秒，也不必使用 TimeOut。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 推荐的；）

于 2013-11-13T06:55:47.583 回答
0

给你所有的图片一个特定的类别。循环浏览您的图像并使用 .load() 检查是否已加载，示例如下...

检测图像负载

于 2013-11-13T05:38:33.647 回答