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

Question

我试图弄清楚如何最好地将加载事件附加到元素，但要确保它能够运行。当我绑定到 img 的加载事件时出现问题，但该绑定发生得太晚并且图像已经加载。 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 代码因此而触发两次。