Question

我使用jQuery load（）函数绑定到图像的onload事件，以轻轻地转换它们。

问题是如果在调用image.load（）函数之前已经加载了图像，那么回调函数永远不会触发。

在调用load（）之前，有没有办法检测图像是否已经加载？

原因是它是一个木偶应用程序并在视图之间移动图像被缓存，并且可能已经在调用渲染函数之前加载。

基本上我的代码位于：

preloadImages: function () {
        var images = $('.grid .item > img');
        var initialHeight = images.eq(0).width();

        images.each(function(){
            $(this).height(initialHeight).css("opacity", 0);
            $(this).load(function(){
                $(this).css("height", "").animate({"opacity": 1}, 200);
            })
        });
    }

Answer 1

在调用load（）之前，有没有办法检测图像是否已经加载？

是。 img个元素有一个complete标志，所以：

images.each(function() {
    var $this = $(this);
    $this.on("load", handleLoad);
    if (this.complete) { // `this` = the DOM element
        $this.off("load", handleLoad);
        handleLoad.call(this);
    }
});

（请注意，这是简化的，我已经省略了用于测量第一个img的代码 - 除非你有CSS强制特定的，否则你要等到它加载为止。 width - 并使用handleLoad而不是内联函数，您必须将加载逻辑移动到其中。）

请注意那里的事情顺序：

首先，挂钩load事件。
然后查看complete。
如果complete为真，则取消隐藏load并直接致电您的处理程序。

为什么这样？因为即使主JavaScript UI线程只是一个线程，浏览器也不是单线程的。因此，如果您执行了if (!this.complete) { $(this).on("load", handleLoad); }，则代码看到complete未设置完全有效，然后在您可以在下一行挂钩加载事件之前，浏览器将触发{ {1}}事件;由于浏览器在该点检查已注册事件处理程序的列表并且未找到任何事件处理程序，因此它不会对任何事件回调进行排队。它不太可能，但有效。

你能做到的另一种方法是使用jQuery的load函数，该函数注册一个在第一次调用时取消注册的处理程序：

one

请注意命名空间（images.each(function() { var $this = $(this); $this.one("load.myload", handleLoad); if (this.complete) { // `this` = the DOM element $this.trigger("load.myload"); } });）。您不想触发可能已经被解雇或排队的其他.myload处理程序。

如果已加载图像，则jQuery .load（）回退

1 个答案: