web-dev-qa-db-fra.com

Retarder un script jQuery jusqu'à ce que tout le reste soit chargé

J'ai un script jQuery que je dois exécuter uniquement lorsque tout le reste de la page, y compris certains autres javascripts (sur lesquels je n'ai aucun contrôle), ont fini de faire leur travail.

Je pensais qu'il y avait peut-être une alternative à $ (document) .ready mais je n'ai pas pu la trouver.

javascriptjquerydom
103
chrism

En raison d'un mélange particulier de frameworks javascript, il me fallait initier le script à l'aide d'un écouteur d'événement fourni par l'un des autres frameworks.

2
chrism

Vous pouvez avoir $(document).ready() plusieurs fois dans une page. Le code est exécuté dans l'ordre dans lequel il apparaît.

Vous pouvez utiliser l'événement $(window).load() pour votre code, car cela se produit une fois la page entièrement chargée et tout le code des différents gestionnaires $(document).ready() terminés.

$(window).load(function(){
  //your code here
});
209
Jose Basilio

Plusieurs $(document).ready() se déclencheront de haut en bas sur la page. Le dernier $(document).ready() se déclenche en dernier sur la page. À l'intérieur de la dernière $(document).ready(), vous pouvez déclencher un nouvel événement personnalisé après tous les autres.

Enveloppez votre code dans un gestionnaire d'événements pour le nouvel événement personnalisé.

<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>
11
Jason Williams

Ce bloc de code résout mon problème,

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

De ici :

// 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    
}

Cela va attendre que jQuery soit chargé pour l'utiliser, mais vous pouvez utiliser le même concept, en définissant des variables dans vos autres scripts (ou en les vérifiant s'ils ne sont pas votre script) pour attendre jusqu'à ce qu'ils soient chargés pour les utiliser.

Par exemple, sur mon site, j'utilise ceci pour le chargement asynchrone de JS et l'attente de la fin de l'opération avant d'utiliser jQuery avec eux:

<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>
3
Chris Doggett

Avez-vous essayé de charger toutes les fonctions d’initialisation à l’aide de $().ready, en exécutant la fonction jQuery que vous vouliez utiliser en dernier?

Vous pouvez peut-être utiliser setTimeout() sur la fonction $().ready que vous souhaitez exécuter, en appelant la fonctionnalité que vous souhaitez charger.

Ou bien, utilisez setInterval() et faites vérifier par intervalle si toutes les autres fonctions de chargement sont terminées (enregistrez le statut dans une variable booléenne). Lorsque les conditions sont remplies, vous pouvez annuler l'intervalle et exécuter la fonction de chargement.

1
Richard Clayton