Javascript JQuery.on（'；load'；）未按预期工作

我正在尝试测试加载图像的时间，以便更改不透明度并使其淡入，我希望使用.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”和“complete”，我得到的每个输出中有一个是我拥有的.hphoto对象的数量，所以有些东西在工作。为什么加载处理程序没有按预期触发？

这一行有问题：

if ($(obj).complete) {

您在jQuery对象上寻找的是

complete

属性，而不是它所包装的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线程，但浏览器不是单线程的。这是一个完全有效的事件序列：

JavaScript解释器计算

$（obj）.prop（“complete”）

并返回值

false

浏览器的图像加载代码运行在不同的线程上，查看它已完成加载该图像，并检查是否有为

load

事件注册的事件处理程序；没有看到任何，它不会为UI线程下一次能够处理挂起的调用队列的时间添加任何处理程序回调

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.prop（“complete”）

，而不是

if（photo[0].complete）

）

这一行是一个问题：

if ($(obj).complete) {

您在jQuery对象上寻找的是

complete

属性，而不是它所包装的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线程，但浏览器不是单线程的。这是一个完全有效的事件序列：

JavaScript解释器计算

$（obj）.prop（“complete”）

并返回值

false

浏览器的图像加载代码运行在不同的线程上，查看它已完成加载该图像，并检查是否有为

load

事件注册的事件处理程序；没有看到任何，它不会为UI线程下一次能够处理挂起的调用队列的时间添加任何处理程序回调

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.prop（“complete”）

，而不是

if（photo[0].complete）

）

这一行是一个问题：

if ($(obj).complete) {

您在jQuery对象上寻找的是

complete

属性，而不是它所包装的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线程，但浏览器不是单线程的。这是一个完全有效的事件序列：

JavaScript解释器计算

$（obj）.prop（“complete”）

并返回值

false

浏览器的图像加载代码运行在不同的线程上，查看它已完成加载该图像，并检查是否有为

load

事件注册的事件处理程序；没有看到任何，它不会为UI线程下一次能够处理挂起的调用队列的时间添加任何处理程序回调

JavaScript解释器钩住图像上的

load

事件

可能性很小，但这是可能发生的

如果您对此感到担心，请先钩住处理程序，然后检查

complete

，如果已设置，请调用您的处理程序并注销它。在上述罕见的相反情况下，您可能会收到两个调用，而不是一个（因为事件发生在挂接处理程序之后，但在检查之前）