renderizado - Ejecutando javascript después de que la página esté completamente renderizada

quitar el javascript que bloquea el renderizado de contenido wordpress

Question

Estoy tratando de crear un script resaltador de sintaxis. Intenté usar mi script en un código con 10 mil líneas y todo lo que veo es una página en blanco mientras se está cargando. Todo se mostrará después de que el script haya terminado su tarea. Por cierto, llamé a mi script dentro de la función ready de jQuery.

$(myFunction);

La secuencia de comandos debe ejecutarse después de que la página se haya procesado por completo y el usuario realmente pueda navegar a través de la página incluso si la secuencia de comandos aún no ha finalizado. El javascript se ejecutará en segundo plano, ya que resalta el código uno por uno sin interferir en la respuesta de la página. Gracias por adelantado.

EDITAR:

Para que esto quede más claro, me gustaría ejecutar el código después de que todo esté "renderizado" y no "cargado". Todo debería estar visible en la pantalla y el usuario puede ver cómo el código cobra vida a medida que se lo resalta. Gracias.

Answer 1

¿Quieres decir después de que todas las imágenes han sido cargadas?

Creo que window.onload es lo que estás buscando

window.onload = function() {
    //dom not only ready, but everything is loaded
};

EDITAR

Por el comentario de Chris, aquí está la manera jQuery:

$(window).load(function() {
    //dom not only ready, but everything is loaded
});

Answer 2

No estoy seguro de la cantidad exacta de datos que se están ingresando ... pero, ¿qué sucede si en un documento listo ejecutó una llamada jquery ajax y usó el método completado para ejecutar su función de resaltador? Si hay muchos datos, la carga de la página será más lenta.

De todos modos me gustaría similar a esto

$.ajax({
            type: "POST",
            url: "Where data is actually stored",
            data: { ChannelTypeID: ChannelTypeID },
            datatype: "html",
            beforeSend: function () {

            },
            success: function (myHTML) {
                $(''body'').html(myHTML);
            },
            error: function () {
                alert("Ajax request was unsuccessful");
            },
            complete: function () {
                highlighterFunction();
            }
        });

El método completo especifica una función que se ejecutará cuando se complete una solicitud AJAX. Esperamos que el éxito se dispare lo suficientemente temprano como para empujar los datos y permitir que su resaltado funcione correctamente

Answer 3

Problema con los enfoques de window.onload

Incluso si usa el método $(window).load , su elemento resaltador podría ejecutarse antes de que se complete el proceso de $(document).ready . Ya que puede haber muchas funciones de devolución de llamadas asíncronas por todas partes.

Mi acercamiento

Utilizo una combinación de espera para document.readyState == ''complete y setTimeout . La idea es que quiero esperar hasta que la página esté completamente representada (de ahí el término ''complete'' ) y luego asegurarme de que el contenido del contenedor JQuery de $(document).ready se haya completado (de ahí el setTimeout ).

Así es como resolvería su problema, asumiendo que 200 milisegundos es tiempo suficiente para todo dentro de $(document).ready(function(){ /*...*/ }); completar.

function highlighterAction() {
    // actually do the highlighting stuff here
}

function highlighter() {
    /*
      The short pause allows any required callback functions
      to execute before actually highlighting, and allows
      the JQuery $(document).ready wrapper to finish.
     */
    setTimeout(function() {
        highlighterAction();
    }, 200);
}

/*
  Only trigger the highlighter after document fully loaded.  This is
  necessary for cases where page load takes a significant length
  of time to fully load.
*/
if (document.readyState == ''complete'') {
    highlighter();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            highlighter();
        }
    }
}