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 ...