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是否为真，例如当它从缓存加载或由于某些其他原因已加载时，如果为真，则触发加载事件... {{ 1}}防止这导致.one()代码因此而引发两次。

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

1 个答案: