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

112

J'ai un script jquery que je n'ai besoin d'exécuter qu'une fois que 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.

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

javascript jquery dom chrisme
la source

Réponses:

217

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' $(window).load()événement pour votre code car cela se produit une fois que la page est complètement chargée et que tout le code des différents $(document).ready()gestionnaires a fini de s'exécuter.

$(window).load(function(){
  //your code here
});
José Basilio
la source
1
puis-je importer des scripts externes en utilisant cette méthode?
chrism
1
Bien sûr, si vous faites déjà cela dans $ (document) .ready (), ce ne sera pas différent.
Jose Basilio
7
Cette réponse m'a été utile car je ne savais pas que le code jquery s'exécutait en séquence
Sevenearths
1
Merci beaucoup! Cela a corrigé mon problème .height () où il n'obtenait pas la bonne hauteur car la page (apparemment) n'était pas encore chargée.
Jon
6
Dans JQuery 3.0, vous devez utiliser la syntaxe $(window).on('load', function() { });puisque $ (window) .load () est obsolète.
Alex H
13

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

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>
Développer l'extrait

Agah Toruk
la source
Comment pouvez-vous exécuter une fonction jQuery pour voir si jQuery est déjà chargé? Cela ne fonctionnera que lorsque jQuery a été chargé avant la vérification.
HelpNeeder
11

Multiple $(document).ready()se déclenchera dans l'ordre de haut en bas sur la page. Le dernier $(document).ready()tirera en dernier sur la page. À l'intérieur du dernier $(document).ready(), vous pouvez déclencher un nouvel événement personnalisé à déclencher 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>
Jason Williams
la source
3

D' 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 attendra 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 si elles ne sont pas votre script) pour attendre qu'elles soient chargées pour les utiliser.

Par exemple, sur mon site, j'utilise ceci pour le chargement asynchrone de JS et j'attends qu'ils aient fini avant de faire quoi que ce soit avec eux en utilisant 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
la source
Cela n'attendra que le chargement de jQuery et ne tiendra pas compte des autres aspects de la page. Ce n'est rien de plus qu'un hack pour les anciennes versions de greasemonkey qui ne prennent pas en charge la directive @require.
Cheekysoft
1
J'ai ajouté mon code comme exemple de la façon dont j'ai utilisé le même concept avec jQuery pour attendre jusqu'à ce qu'un autre code soit chargé.
Chris Doggett
1

Il s'avère qu'en raison d'un mélange particulier de frameworks javascript dont j'avais besoin pour lancer le script à l'aide d'un écouteur d'événements fourni par l'un des autres frameworks.

chrisme
la source
3
Heureux que vous ayez trouvé une solution mais votre réponse n'est pas utile pour les autres sans plus de détails ...
Andrew
1

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

Vous pouvez peut-être utiliser setTimeout()la $().readyfonction que vous vouliez exécuter, en appelant la fonctionnalité que vous vouliez charger.

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

Richard Clayton
la source
Je ne sais pas ce que vous entendez par là. Suggérez-vous d'importer tous les scripts via un script jquery et de simplement mettre mon script en dernier? Si oui, à quoi cela ressemblerait-il (je suis un designer de métier, alors n'utilisez pas de gros mots :))
chrism
$ (document) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
Richard Clayton
les autres scripts sont tous des fichiers externes, donc je ne suis pas sûr que cela fonctionnerait, n'est-ce pas?
chrism
@chrism: Voir mon deuxième exemple. Il attend que des variables soient définies indiquant que les autres fichiers JS externes ont été chargés avant de faire quoi que ce soit. Vous venez de mettre le code que vous voulez exécuter en dernier dans ma méthode JS_ready (). Il fait exactement ce que vous recherchez.
Chris Doggett
2
Just use$(window).load(function(){...})
Ryan Taylor