JavaScript que se ejecuta después de la página está representado completamente

Question

Estoy tratando de crear un guión 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 guión haya terminado su tarea. Por cierto, llamé a mi script dentro de la función de jQuery.

$(myFunction); 

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

EDIT:

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

Answer 1

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

Creo window.onload es lo que estás buscando

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

EDITAR

comentario de por Chris, aquí es la forma en jQuery:

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

Answer 2

No

seguro exactamente la cantidad de datos está siendo introducido ... pero ¿qué pasa si en el documento listo ejecutaste una llamada jquery ajax y usaste el método completo para ejecutar tu función más ligera? Si hay una gran cantidad de datos, la carga de la página será más lenta.

De todas formas le gustaría similar a este

$.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 ejecute cuando se completa una petición AJAX. Esperemos que el éxito se disparará con tiempo suficiente para empujar a los datos y permitir que su punto culminante funcione correctamente

Answer 3

Una forma sencilla de hacerlo es mediante la introducción de demora. Use setTimeout() para lograr esto. Por ejemplo: setTimeout (func, 1000);

La línea anterior ejecuta la función "FUNC" después de esperar durante 1000 milisegundos. Según el tiempo que tarde en cargar su contenido, establezca el campo de tiempo (parámetro) en setTimeout. el uso

Ejemplo:

$(document).ready(function(){ 

function func() 
{ 
    alert("hi"); 
} 
setTimeout(func, 1000); 
}); 

Espero que esto ayude!

Answer 4

Problema con window.onload se acerca

Incluso si se utiliza el enfoque $(window).load, su materia rotulador podría conseguir ejecutar antes de completar algo de $(document).ready, ya que puede haber una gran cantidad de funciones de devolución de llamada asincrónica todo el lugar.

Mi enfoque

que utilizan una combinación de esperar a document.readyState == 'complete y setTimeout. La idea es que quiero esperar hasta que la página se haya procesado por completo (de ahí el 'complete') y garantizar que el contenido de la envoltura JQuery $(document).ready se haya completado (de ahí el setTimeout).

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

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