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

Question

我试图找出如何最好地将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代码因此而发射两次.