javascript - pagina - ¿Por qué mi evento/función ''cargar'' no se ejecuta después de cambiar a jQuery 3?

ejecutar funcion javascript antes de cargar la pagina

Question

Como he actualizado 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 ya no se activa o solo a veces:

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

Answer 1

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

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

Uso de jQuery:

Para cambiar este comportamiento, simplemente elimine el ready state alrededor de la inicialización de su escucha de eventos de load . No hay necesidad de encapsular esto con una función ready . Puede 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ía jQuery plugins, que también usa el evento load . 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 envuelve 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 complemento 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 ocurra, en sus pruebas, debe cambiar ese código inmediatamente, cuando use jQuery 3 , porque otros usuarios / navegadores diferentes pueden encontrarse con este problema. Otros pueden tener el problema, porque es asynchron , nunca se podría saber cuándo / si se ejecuta su código ...