jQuery .load()回调函数多次触发

Question

第一次执行代码时,它正确生成:
加载完成

但第二次产生:
加载完成
负载完成

它产生的第3次:
负载完全
负载完成
负载完成

等...所以第20次加载功能完成后,回调函数被触发20次.

$('#image-tag').load(function () {
        console.log("load complete");
    });
}).attr('src', 'image.jpg').appendTo('#main');

是什么导致回调功能重复/增加这样的？

Answer 1

这就像你在一个点击处理程序或其他东西中调用它,这每次绑定一个新的 .load()处理程序.绑定.load()一次,或使用.one(),像这样:

$('#image-tag').one('load', function () {
    console.log("load complete");
});

Answer 2

那是因为每次运行该代码时都要添加另一个事件处理程序.

如果要将图像标记附加到元素中,则不应使用页面中已有的图像.改为创建一个新的图片代码:

$('<img/>').load(function () {
  console.log("load complete");
}).attr('src', 'image.jpg').appendTo('#main');