¿Por qué mi evento / función de ‘carga’ no se ejecuta después de cambiar a jQuery 3?

Desde que me actualicé de jQuery 1.x / jQuery 2.x a jQuery 3.x , mi código existente ya no se ejecutará correctamente. Todo funciona bien, pero el detector de eventos de load no se activa más o solo a veces:

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

El problema puede ocurrir al usar / cambiar a jQuery 3 . Es porque todos los ready states en el nuevo jQuery 3 ahora son completamente asynchron . Esto significa que no hay un orden determinado para que se ejecute su código.

Debido a esto, podría suceder que la load se haya activado antes de que se haya ejecutado su ready state . Cuando finalmente se activa su función de ready , su detector de load es demasiado tarde y no se ejecutará.


Uso jQuery:

Para cambiar este comportamiento, solo elimine el ready state alrededor de la inicialización del detector de eventos de load . No hay necesidad de encapsular esto con una función ready . Puedes inicializarlos sin

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

Si necesita o desea registrar ambos eventos, puede registrar el evento de load usted mismo y decidir dentro del ready state qué hacer a continuación.

 // 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(); } }); 

Complementos jQuery:

Otro caso serían los complementos de jQuery, que usa el evento load también. Por ejemplo:

 (function($, window) { $.fn.myPlugin = function() { $(window).on("load", start); function start() { console.log("plugin initialized and window loaded"); } }; })(jQuery, window); 

Si un desarrollador / usuario ahora ajusta la inicialización del complemento en un ready state el problema podría volver a ocurrir, tal como se explicó anteriormente:

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

Una solución sería rastrear el evento de load en su plugin por su cuenta, para romper el 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); 

Conclusión:

Incluso cuando este problema no le pase a usted, en sus pruebas, debe cambiar esos códigos inmediatamente, cuando use jQuery 3 , ya que otros usuarios / diferentes navegadores pueden tener este problema. Otros pueden tener el problema, porque es asynchron , nunca se sabe cuándo / si se ejecuta su código …