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

我试图找出如何最好地将加载事件附加到元素，但请确保它运行。当我绑定到 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 设置一些标志来告诉它运行该函数吗？

您可以使用以下方法执行此操作.one() and .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图像的值为 true，例如，当它从缓存加载或已因其他原因加载时，如果为 true，则触发加载事件....one()防止这导致load因此，代码会触发两次。