如果在加载发生后附加事件，则确保在jQuery事件中触发加载代码

我试图找出如何最好地将load事件附加到元素，但要确保它运行。 当我绑定到img的load事件时出现问题，但是绑定发生得太晚并且图像已经加载。 有没有办法在jQuery中检查图像是否已经加载？

它显然是一个间歇性问题，因为有时代码在图像加载之前运行，有时则不运行。

$(function () { var hasRun = false; $('#image').bind('load', function () { if ($(this).width() <= 0 || $(this).height() <= 0 || hasRun) return; hasRun = true; // do work here }).trigger('load'); }); 

代码看起来像那样。 我添加了hasRun变量并检查变量的高度和宽度以确保其已加载，然后添加了触发器。

有一个更好的方法吗？ 是否有一些我可以用jQuery设置的标志告诉它如果图像已经加载则运行该函数？

Answer 1

你可以使用.one()和.complete这样做：

 $('#image').one('load', function () { if ($(this).width() <= 0 || $(this).height() <= 0 || hasRun) return; hasRun = true; // do work here }).each(function() { if(this.complete) $(this).trigger('load'); }); 

.one()确保处理程序只执行一次。 末端的循环检查图像的.complete是否为真，例如当它从缓存加载或由于某些其他原因已加载时，如果为真，则触发加载事件... .one()阻止这导致load代码因此而引发两次。