确保在加载后附加事件时在jQuery事件中触发加载代码

zujrkrfu  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(103)

我正在尝试找出如何最好地将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设置的一些标志来告诉它在图像已经加载的情况下运行该函数?

kxe2p93d

kxe2p93d1#

您可以像这样使用.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是否为真,例如当它从缓存加载或由于其他原因已经加载时,如果为真,则触发load事件... .one()防止这导致load代码触发两次。

相关问题