jQuery .on('load')没有按预期工作

jQuery .on('load') is not working as expected

本文关键字：工作 load on jQuery      更新时间：2023-09-26

我正在尝试测试当一个图像被加载，所以我可以改变不透明度和淡入，我想这样做与.hphoto类的所有图像。

这是我如何尝试用jQuery:

function handle_photoloads() {
    $(".hphoto").each(function (i,obj) {
        console.log("Yo");
        if ($(obj).complete) {
            console.log("1");
            $(obj).css('opacity','1');
        } else {
            console.log("incomplete");
            $(obj).on('load',function () {
                console.log("2");
                $(obj).css('opacity','1');
            });
        }
    });
}
$(document).ready(function() {
    handle_photoloads();
});

我得到的输出是"Yo"answers"不完整"，我得到了.hphoto对象数量的每个输出中的一个，所以有些东西在工作。为什么负载处理程序没有按预期触发?

这一行有问题:

if ($(obj).complete) {

你正在寻找一个complete属性的jQuery对象，而不是DOM元素它包装。因为obj指的是DOM元素，所以最简单的是:

if (obj.complete) {              // Where `obj` refers to the DOM element

否则，请使用prop，但当您知道是元素时通常不会使用它:

if ($(obj).prop("complete")) {   // Where `obj` refers to the DOM element

然而，请注意检查complete标志然后添加处理程序有一个小的错过事件的机会。浏览器中的JavaScript只有一个UI线程，但是浏览器不是单线程的。这是一个完全有效的事件序列:

  1. JavaScript解释器计算$(obj).prop("complete")并返回false的值

  2. 浏览器的图像加载代码，在不同的线程上运行，看到它已经完成加载图像，并检查是否有任何事件处理程序为load事件注册;当UI线程下一次能够处理挂起的调用队列时，它不会添加任何处理程序回调。

  3. JavaScript解释器将load事件挂在图像上。

几率很低，但这是可能发生的。

如果你担心它，首先钩子处理程序，然后检查complete，如果它被设置，调用你的处理程序并注销它。在上述情况的罕见反转中，您可能会得到两个调用而不是一个(因为事件发生在钩子处理程序之后，但在检查complete之前)，但是"有时两个"比"有时零"要好。: -)

jQuery的微妙命名的one函数可以在这个上下文中使用:

function handle_photoloads() {
    $(".hphoto").each(function (i,obj) {
        var photo = $(obj);            // Or = $(this), which would be more common
        console.log("Yo");
        photo.one("load", function() { // Note `one`, not `on`
            photo.css('opacity','1');
        });
        if (photo.prop("complete")) {
            photo.trigger("load");
        }
    });
}

one在第一次调用处理程序时删除它。所以我们只得到一个回调，不管时间。

(在上面，您可以使用if (photo[0].complete)而不是if (photo.prop("complete")))

相关文章：