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

Answer 2

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

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

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

Answer 3

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

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

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