Javascript / JQuery - 如何针对损坏的图像重置onError函数？ （对于第二个破碎的图像）

Question

好的，我的onError javascript运行得很好。但是，在大多数情况下，我需要尝试一个替代图像，如果该图像也被破坏，则需要回退到本地默认图像。

在初始损坏的图像（http://somesite.com/someimage.jpg）上，此代码正确加载传递的备用图像。但是，正如您从代码中看到的那样，我正在尝试重置source.onerror，以便如果备用映像也被破坏，它将只加载本地默认映像（/some/local/file.jpg）。但是，永远不会调用defaultImage（）。这不是传递“this”的问题，因为如果我将其更改为source.onerror="alert('hi')";，它永远不会被调用。

看起来当页面加载时，它只会发生一次错误，并且永远不会再次尝试。有没有什么方法可以强制DOM再次尝试加载img，以便在替换图像被破坏时启动新的onerror函数？

<img src="http://somesite.com/someimage.jpg" onerror="AltImage(this, 'http://sommesite.com/otherimage.jpg');"/>
<img src="http://somesite.com/someimage.jpg" onerror="AltImage(this, '');"/>
<script>
function AltImage(source, alt_image){
  if (alt_image !=""){
    source.src = alt_image;
    source.onerror = "defaultImage(this)";
    return true;
  }
  source.src = "/some/local/file.jpg";
  source.onerror = "";
  return true;
}
function defaultImage(source) {
  source.src = "/some/local/file.jpg";
  data.onerror="";
  return true;
}
</script>

Answer 1

您可以使用以下功能而不是您的方法检查图像是否存在：

function ImgLoad(myobj,sSrc)
{
   var oImg=new Image();
   oImg.src="http://mydomain.com/images/"+sSrc;
   oImg.onload=function(){myobj.src=oImg.src}
   oImg.onerror=function(){myobj.src="http://mydomain2.com/images/"+sSrc}
}

Answer 2

我会尝试做什么：

$(function() {
    $('img.fallbackable').error(function() {
        $(this).unbind('error');
        this.onerror = function() {
            this.src = 'default.png';
        };
        this.src = $(this).data('altsrc');
    })
    .attr('src', function() {
        return $(this).data('src');
    });
});

在HTML中定义您的图像，这些图像应该具有下一个所需的行为：

<img data-src="someimage.jpg" data-altsrc="otherimage.jpg" class="fallbackable">

因此图像不是立即开始加载，而是仅在DOM准备好并且所有这些图像对象都附加了onerror处理程序时才开始加载。因此，我们确保对于所有这些图像（标有类fallbackable），如果需要，可以执行错误处理程序。