Retrasar un script de jquery hasta que todo lo demás se haya cargado

111

Tengo un script jquery que necesito ejecutar solo una vez que todo lo demás en la página, incluidos algunos otros javascripts (sobre los que no tengo control) hayan terminado de hacer lo suyo.

Pensé que tal vez hubiera una alternativa a $ (document) .ready pero no he podido encontrarla.

javascript jquery dom aceite
fuente

Respuestas:

217

Puede tener $(document).ready()varias veces en una página. El código se ejecuta en la secuencia en la que aparece.

Puede usar el $(window).load()evento para su código, ya que esto sucede después de que la página está completamente cargada y todo el código en los distintos $(document).ready()controladores ha terminado de ejecutarse.

$(window).load(function(){
  //your code here
});
Jose basilio
fuente
1
¿Puedo importar scripts externos usando este método?
crisma
1
Claro, si ya está haciendo esto dentro de $ (document) .ready (), esto no será diferente.
Jose Basilio
7
Esta respuesta fue útil para mí porque no me di cuenta de que el código jquery se ejecuta en secuencia
Sevenearths
1
¡Muchas gracias! Esto solucionó mi problema .height () donde no obtenía la altura correcta porque la página (aparentemente) aún no se había cargado.
Jon
6
En JQuery 3.0, debe usar la sintaxis $(window).on('load', function() { });ya que $ (window) .load () está en desuso.
Alex H
13

Este bloque de código resuelve mi problema,

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>
Expandir fragmento

Agah Toruk
fuente
¿Cómo se puede ejecutar una función de jQuery para ver si jQuery ya está cargado? Esto funcionará solo cuando jQuery se haya cargado antes de la verificación.
HelpNeeder
11

Varios $(document).ready()se dispararán en orden de arriba hacia abajo en la página. El último $(document).ready()se disparará al final de la página. Dentro del último $(document).ready(), puede activar un nuevo evento personalizado para que se active después de todos los demás.

Envuelva su código en un controlador de eventos para el nuevo evento personalizado.

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>
Jason Williams
fuente
3

Desde aqui :

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
}

Esto esperará hasta que se cargue jQuery para usarlo, pero puede usar el mismo concepto, configurando variables en sus otros scripts (o verificándolos si no son su script) para esperar hasta que estén cargados para usarlos.

Por ejemplo, en mi sitio, utilizo esto para la carga asincrónica de JS y espero hasta que terminen antes de hacer algo con ellos usando jQuery:

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script>
Chris Doggett
fuente
Esto solo esperará hasta que se cargue jQuery y descartará otros aspectos de la página. No es más que un truco para versiones anteriores de greasemonkey que no admiten la directiva @require.
Cheekysoft
1
Agregué mi código como un ejemplo de cómo usé el mismo concepto con jQuery para esperar hasta que se cargue otro código.
Chris Doggett
1

Resulta que debido a una mezcla peculiar de marcos de JavaScript, necesitaba iniciar el script utilizando un detector de eventos proporcionado por uno de los otros marcos.

aceite
fuente
3
Feliz de haber encontrado una solución, pero su respuesta no es útil para otros sin más detalles ...
Andrew
1

¿Ha intentado cargar todas las funciones de inicialización usando $().ready, ejecutando la última función jQuery que deseaba?

Quizás pueda usar setTimeout()en la $().readyfunción que desea ejecutar, llamando a la funcionalidad que desea cargar.

O utilice setInterval()y haga que el intervalo compruebe si se han completado todas las demás funciones de carga (almacene el estado en una variable booleana). Cuando se cumplen las condiciones, puede cancelar el intervalo y ejecutar la función de carga.

Richard Clayton
fuente
No estoy seguro de a qué te refieres con esto. ¿Estás sugiriendo que importe todos los scripts a través de un script jquery y coloque mi script al final? Si es así, ¿cómo se vería eso (soy diseñador de oficio, así que no use palabras grandes :))
crisma
$ (documento) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
Richard Clayton
los otros scripts son archivos externos, por lo que no estoy seguro de que esto funcione, ¿verdad?
crisma
@chrism: Vea mi segundo ejemplo. Espera hasta que se establecen las variables que indican que los otros archivos JS externos se han cargado antes de hacer nada. Simplemente coloque el código que desea ejecutar en último lugar en mi método JS_ready (). Hace exactamente lo que estás buscando.
Chris Doggett
2
Solo use$(window).load(function(){...})
Ryan Taylor