Почему мое событие «load» не выполняется после переключения на jQuery 3?

Question

Поскольку я обновил с jQuery 1.x/jQuery 2.x до jQuery 3.x, мой существующий код больше не будет выполнен. Все работает отлично, но слушатель load события получает не срабатывает больше или просто иногда:

$(function() { 
    $(window).on("load", function() { 
     // this line will never/occasionally be executed 
     console.log("window is loaded!"); 
    }); 
}); 

Answer 1

Проблема может быть возникнуть при использовании/переключения на jQuery 3. Это потому, что все ready states в новом jQuery 3 теперь полностью asynchron. Это означает, что для вашего кода не будет никакого заказа.

Из-за этого, может случиться, что load это было вызвано до того ваш ready state была выполнена. Когда ваша функция ready теперь, наконец, запускается, ваш слушатель load опоздает и не будет выполнен.

---

JQuery Использование:

Чтобы изменить это поведение, просто удалить ready state вокруг load события инициализации слушателя. Нет необходимости инкапсулировать это с помощью функции ready. Вы можете их инициализировать без них.

// $(function() { 
    $(window).on("load", function() { 
     // this line will now be executed again 
     console.log("window is loaded!"); 
    }); 
// }); 

Если вам нужно или хотите зарегистрировать оба события, вы можете зарегистрировать load событие самостоятельно и решить внутри ready state, что делать дальше.

// track the loading state by yourself 
var windowLoaded = false; 
$(window).on("load", function() { 
    windowLoaded = true; 
}); 

$(function() { 
    function afterLoad() { 
     console.log("loaded"); 
    } 

    // decide inside your ready state what to do 
    if(!windowLoaded) { 
     $(window).on("load", afterLoad); 
    } 
    else { 
     afterLoad(); 
    } 
}); 

---

JQuery плагинов:

Другой случай будет JQuery плагин, который использует load событие тоже. Например:

(function($, window) { 
    $.fn.myPlugin = function() { 
     $(window).on("load", start); 

     function start() { 
      console.log("plugin initialized and window loaded"); 
     } 
    }; 
})(jQuery, window); 

Если разработчик/пользователь теперь оборачивает инициализации плагина в ready state проблема может повториться, так же, как было объяснено выше:

$(function() { 
    $("#element").myPlugin(); 
}); 

Решение будет отслеживать load событие в вашем плагине самостоятельно, до выходятready state.

(function($, window) { 
    // track the loading state beside the plugin initialization 
    var windowLoaded = false; 
    $(window).on("load", function() { 
     windowLoaded = true; 
    }); 

    $.fn.myPlugin = function() { 
     // decide inside your plugin how to start 
     if(!windowLoaded) { 
      $(window).on("load", start); 
     } 
     else { 
      start(); 
     } 

     function start() { 
      console.log("plugin initialized and window loaded"); 
     } 
    }; 
})(jQuery, window); 

---

Вывод:

Даже если эта проблема не происходит с вами, в ваших тестах, вы должны изменить этот код сразу, при использовании jQuery 3, потому что другие пользователи/другой браузер может работать в эту проблему. У других может возникнуть проблема, потому что это asynchron, вы никогда не узнаете, когда/если ваш код будет выполнен ...