Question

我的页面上有多个图像。为了检测损坏的图像，我在SO上使用了这个。

$('.imgRot').one('error',function(){
    $(this).attr('src','broken.png');
});

这在我理解的第一张图片上工作正常。但是当我把它改成

时

$('.imgRot').on('error',function(){
    $(this).attr('src','broken.png');
});

它不适用于任何图像。有人可以告诉我为什么吗？

Answer 1

社区维基：这个通用答案对OP发布的问题没有贡献，但与标题有关。

one（）和 on（）的概念可以用下面的代码解释。

第一次出现后，

one()函数自动移至关闭状态。

on()与one（）相同但需要手动设置为off状态，否则实例数没有限制。

var i = 1;
$('.one').one('click', function() {

  $(this).text('I am clickable only once: ' + i);
  i++;
});

var j = 1;
$('.multiple').on('click', function() {

  $(this).text('I was clicked ' + j + ' times');
  j++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">Click me</div>
<div class="multiple">Click me</div>

Answer 2

如果你在jQuery 1.7中查看.one()的源代码，它只是在内部调用.on()，除了在事件触发后它会删除事件处理程序。所以，你的情况应该没有区别，因为error是一个事件，每个对象只应该发生一次。

所以，你的代码中肯定会发生其他事情，比如当你运行这段代码或类似代码时，图像对象可能还没有被加载到DOM中。

如果您尝试使用委托事件处理来执行此操作（您的示例未显示），则可能会遇到“错误”事件未传播的问题。

由于缓存，您的代码可能还存在计时问题。尝试在已经存在于DOM中的图像上安装这些类型的错误处理程序是一种竞争条件。您试图在调用之前安装错误处理程序，但图像已经开始加载，并且在安装事件处理程序之前可能已经触发了事件。后续页面加载（在第一个之后）可能已缓存其他页面元素或DNS引用，因此它可能更快地到达错误处理程序，甚至可能在JS运行并安装错误处理程序之前。

我知道这是浏览器缓存和onload事件的问题。如果您在嵌入式HTML中附加事件处理程序，则只能可靠地获取onload事件（因此，在首次解析<img>标记时或者在.src之前附加它时，它就会出现在那里属性已设置（如果以编程方式创建图像）。这表明您无法像对页面HTML中的图像那样可靠地设置error处理程序。

我的建议是：

在图像进入DOM之后，不要尝试安装这样的错误处理程序。
如果您以编程方式生成图像来分配它们，则在分配.src之前分配事件处理程序。
如果您需要在页面的HTML中使用这些图像，那么您必须将事件处理程序放在HTML中<img src="xxx" onerror="yourErrorFunc(this)">，因为这是确保在事件发生之前安装处理程序的唯一方法发生。

jQuery.one（）和jQuery.on（）之间的区别

2 个答案: