Warum wird mein 'load' Ereignis/Funktion nicht ausgeführt, nachdem ich zu jQuery 3 gewechselt habe?

Question

Da ich von jQuery 1.x/jQuery 2.x auf jQuery 3.x aktualisiert habe, wird mein bestehender Code nicht mehr korrekt ausgeführt. Alles funktioniert gut, aber der load Ereignis-Listener wird nicht mehr oder nur manchmal ausgelöst:

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

Answer 1

Das Problem kann auftreten, wird bei der Verwendung von/Umschalten auf jQuery 3. Es ist, weil alle ready states in der neuen jQuery 3 jetzt vollständig asynchron sind. Das bedeutet, dass keine Reihenfolge für die Ausführung Ihres Codes vorhanden ist.

Aus diesem Grund kann es vorkommen, dass load worden ausgelöst wird, bevor Ihre ready state ausgeführt wurde. Wenn Ihre ready Funktion jetzt endlich ausgelöst wird, ist Ihr load Listener zu spät und wird nicht ausgeführt.

---

jQuery Verbrauch:

dieses Verhalten zu ändern, entfernen Sie einfach die ready state um Ihre load Ereignis-Listener-Initialisierung. Es ist nicht notwendig, dies mit einer ready Funktion zu kapseln. Sie können sie ohne initialisieren.

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

Wenn Sie wollen oder müssen beide Ereignisse registrieren, können Sie das load Ereignis selbst registrieren und innerhalb des ready state entscheiden, was als nächstes zu tun.

// 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 Plugins:

einem anderen Fall würde jQuery Plugins sein, die zu den load Ereignis verwendet. Zum Beispiel:

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

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

Wenn ein Entwickler/Anwender nun die Plugin-Initialisierung in einem ready state Wraps könnte das Problem noch einmal passieren, genau wie zuvor erläutert:

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

wäre eine Lösung, die das load Ereignis zu verfolgen sein in Ihrem Plugin auf eigene Faust, brechen die 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); 

---

Fazit:

Selbst wenn dieses Problem Ihnen nicht der Fall ist, in Ihren Tests, sollten Sie diese Code sofort ändern, wenn jQuery 3 verwenden, da andere Benutzer/anderen Browser ausgeführt werden können in diese Schwierigkeiten. Andere können das Problem haben, weil es asynchron ist, können Sie nie wissen, wann/wenn Ihr Code ausgeführt wird ...