Verzögern eines JQuery-Skripts, bis alles andere geladen ist

111

Ich habe ein JQuery-Skript, das ich nur ausführen muss, wenn alles andere auf der Seite, einschließlich einiger anderer Javascripts (über die ich keine Kontrolle habe), ihre Arbeit beendet hat.

Ich dachte, es gab vielleicht schon eine Alternative zu $ ​​(Dokument), aber ich konnte sie nicht finden.

javascript jquery dom chrism
quelle

Antworten:

217

Sie können $(document).ready()mehrere Male auf einer Seite haben. Der Code wird in der Reihenfolge ausgeführt, in der er angezeigt wird.

Sie können das $(window).load()Ereignis für Ihren Code verwenden, da dies geschieht, nachdem die Seite vollständig geladen wurde und der gesamte Code in den verschiedenen $(document).ready()Handlern ausgeführt wurde.

$(window).load(function(){
  //your code here
});
Jose Basilio
quelle
1
Kann ich mit dieser Methode externe Skripte importieren?
chrism
1
Sicher, wenn Sie dies bereits in $ (document) .ready () tun, wird dies nicht anders sein.
Jose Basilio
7
Diese Antwort war nützlich für mich, weil ich nicht wusste, dass JQuery-Code nacheinander ausgeführt wird
Sevenearths
1
Ich danke dir sehr! Dies hat mein .height () -Problem behoben, bei dem die richtige Höhe nicht erreicht wurde, da die Seite (anscheinend) noch nicht geladen wurde.
Jon
6
In JQuery 3.0 sollten Sie die Syntax verwenden, $(window).on('load', function() { });da $ (window) .load () veraltet ist.
Alex H
13

Dieser Codeblock löst mein Problem,

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>
Erweitern Sie das Snippet

Agah Toruk
quelle
Wie können Sie eine jQuery-Funktion ausführen, um festzustellen, ob jQuery bereits geladen ist? Dies funktioniert nur, wenn jQuery vor der Überprüfung geladen wurde.
HelpNeeder
11

Mehrere $(document).ready()werden in der Reihenfolge von oben nach unten auf der Seite ausgelöst. Der letzte $(document).ready()wird zuletzt auf der Seite ausgelöst. Im letzten $(document).ready()können Sie ein neues benutzerdefiniertes Ereignis auslösen, das nach allen anderen ausgelöst wird.

Wickeln Sie Ihren Code in einen Ereignishandler für das neue benutzerdefinierte Ereignis.

<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
quelle
3

Von hier aus :

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

Dies wartet, bis jQuery geladen ist, um es zu verwenden. Sie können jedoch dasselbe Konzept verwenden, indem Sie Variablen in Ihren anderen Skripten festlegen (oder sie überprüfen, wenn sie nicht Ihr Skript sind), um zu warten, bis sie geladen werden, um sie zu verwenden.

Auf meiner Site verwende ich dies beispielsweise zum asynchronen Laden von JS und zum Warten, bis sie fertig sind, bevor ich mit jQuery etwas mit ihnen mache:

<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
quelle
Dies wartet nur, bis jQuery geladen ist, und ignoriert andere Aspekte der Seite. Es ist nichts weiter als ein Hack für ältere Versionen von greasemonkey, die die @ require-Direktive nicht unterstützen.
Cheekysoft
1
Ich habe meinen Code als Beispiel hinzugefügt, wie ich das gleiche Konzept mit jQuery verwendet habe, um zu warten, bis anderer Code geladen wurde.
Chris Doggett
1

Es stellt sich heraus, dass ich aufgrund einer besonderen Mischung von Javascript-Frameworks das Skript mithilfe eines Ereignis-Listeners initiieren musste, der von einem der anderen Frameworks bereitgestellt wird.

chrism
quelle
3
Ich bin froh, dass Sie eine Lösung gefunden haben, aber Ihre Antwort ist für andere ohne weitere Details nicht nützlich ...
Andrew
1

Haben Sie versucht, alle Initialisierungsfunktionen mit der zuletzt $().readyausgeführten jQuery-Funktion zu laden ?

Vielleicht können Sie setTimeout()die $().readyFunktion verwenden, die Sie ausführen möchten, und die Funktionalität aufrufen, die Sie laden möchten.

Oder verwenden Sie setInterval()die Intervallprüfung, um festzustellen, ob alle anderen Ladefunktionen abgeschlossen sind (speichern Sie den Status in einer booleschen Variablen). Wenn die Bedingungen erfüllt sind, können Sie das Intervall abbrechen und die Ladefunktion ausführen.

Richard Clayton
quelle
Ich bin mir nicht sicher, was du damit meinst. Schlagen Sie vor, dass ich alle Skripte über ein JQuery-Skript importiere und mein Skript zuletzt einstelle? Wenn ja, wie würde das aussehen (ich bin ein Designer von Beruf, also benutze keine großen Worte :))
chrism
$ (document) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
Richard Clayton
Die anderen Skripte sind alle externe Dateien, daher bin ich mir nicht sicher, ob dies funktionieren würde, oder?
chrism
@chrism: Siehe mein zweites Beispiel. Es wartet, bis Variablen festgelegt sind, die angeben, dass die anderen externen JS-Dateien geladen wurden, bevor etwas unternommen wird. Sie geben einfach den Code, den Sie zuletzt ausführen möchten, in meine JS_ready () -Methode ein. Es macht genau das, wonach Sie suchen.
Chris Doggett
2
Verwenden Sie einfach$(window).load(function(){...})
Ryan Taylor