javascript - load()方法被多次进入(执行)

Question

在我的 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次...

请多多指教 谢谢

Answer 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');
    });
}