load() 方法多次进入（执行）答案

【问题标题】：load() method is entered (executed) many timesload() 方法多次进入（执行）
【发布时间】：2012-12-22 00:10:40
【问题描述】：

在我的 html 页面中，我有一张图片，点击一个按钮，我正在调用函数 TestLoad()，它正在更改图像的 src，当加载图像时，我正在做某事.. . 举个例子： javascript：

function TestLoad() {

    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');

     $('#ImgTest').load(function () {
         alert('after');
     });
}

html:

 <img id = "ImgTest" alt="" src="" style="width:100px; height:100px"/> 

 <input type="button" onclick ="TestLoad();" value="TestLoad"/>

我的问题是：当我第一次单击按钮时，我会收到一次“之后”的警报，如果我再次单击，警报将显示两次，第三次显示 3 次...

请多多指教谢谢

【问题讨论】：

Read the docs - .load 在图像上使用时不可靠。 You need to do some magic.
每次绑定到 load 事件时，除了之前的处理程序之外，您正在向 load 事件添加一个新的处理程序。为什么每次绑定都不触发一次？
@Blazemonger 有一种比该答案中建议的方法更好的方法，仅供参考。只需在更改 src 之前绑定 load 事件，那么无论它是否缓存在所有浏览器中，它都会始终触发。 :)
好的，感谢您的 cmets

标签： javascript jquery html

【解决方案1】：

您的处理程序每次执行时，都会添加另一个新的加载处理程序。您只需要分配一次处理程序。如果您确实需要这样做，您可以先删除现有的处理程序，或者检查事件以查看它是否已被处理：

var $imgTest = $('#ImgTest');

$imgTest.attr('src','Images/Image1.jpg');
$imgTest.unbind('load');
$imgTest.load(function(){
    alert('after');
});

或者：

var events;
var $imgTest = $('#ImgTest');

$imgTest.attr('src', 'Images/Image1.jpg');
events = $imgTest.data('events');
if(events !== null && typeof events.load === undefined){
    $imgTest.load(function(){
        alert('after');
    });
}

【讨论】：

注意，你需要在修改src之前绑定加载事件，否则缓存的图片不会触发oldIE中的加载事件。
另外，.data('events') 在 1.8+ 中不起作用，有一个使用 _data 的解决方法，但建议仅用于调试。

【解决方案2】：

您的 onclick 事件可能正在绑定另一个加载事件。

您无需继续向其中添加事件。它已经存在。如果您需要绑定另一个，您需要先取消绑定上一个事件。

.on("load", function() { ... });
.off("load");

【讨论】：

【解决方案3】：

您正在事件处理程序中绑定多个函数

//bind this outside of your test load method
$('#ImgTest').load(function () {
    alert('after');
});

function TestLoad() {
    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');
}

【讨论】：