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

好的，我已经让onError javascript很好地工作了。但是，在大多数情况下，我需要尝试一个备用图像，如果该图像也被破坏，则需要返回到本地默认图像

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

source.onerror=“alert（'hi'）”无论如何都不会被调用

似乎当页面加载时，它只会踢onerror一次，不会再次尝试。是否有某种方法可以强制DOM再次尝试加载img，以便在备用映像损坏时启动新的OneError函数

<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>


函数AltImage（源、alt_图像）{
如果（alt_图像！=“”）{
source.src=alt_image；
source.onerror=“defaultImage（this）”；
返回true；
}
source.src=“/some/local/file.jpg”；
source.onerror=“”；
返回true；
}
函数defaultImage（源）{
source.src=“/some/local/file.jpg”；
数据。onerror=“”；
返回true；
}
您可以使用以下功能而不是您的方法来检查图像是否存在：

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}
}

您可以使用下面的函数而不是您的方法来检查图像是否存在：

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}
}

我将尝试做的是：

$(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处理程序时，图像才会立即开始加载。因此，我们确保所有此类图像（标有class
fallbackable
）都有一个需要执行的错误处理程序。
我将尝试做什么：

$(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处理程序时，图像才会立即开始加载。因此，我们确保所有此类图像（标有class
fallbackable
）都有一个需要执行的错误处理程序。
这是一个客户端脚本，它取决于浏览器的安全设置，而不是服务器。谢谢，这是有效的。。。我没有想到要用不同的onload和onerror创建一个新的图像！这是一个客户端脚本，它取决于浏览器的安全设置，而不是服务器。谢谢，这很有效。。。我没有想到要用不同的onload和onerror创建一个新的图像！