Opóźnianie skryptu jquery, dopóki wszystko inne nie zostanie załadowane

112

Mam skrypt jquery, który muszę uruchomić tylko wtedy, gdy wszystko inne na stronie, w tym kilka innych skryptów javascrip (nad którymi nie mam kontroli), zakończyło swoje działanie.

Pomyślałem, że być może istnieje alternatywa dla $ (document) .ready, ale nie udało mi się jej znaleźć.

javascript jquery dom krzyżmo
źródło

217

Możesz mieć $(document).ready()wiele razy na stronie. Kod jest uruchamiany w kolejności, w jakiej się pojawia.

Możesz użyć $(window).load()zdarzenia dla swojego kodu, ponieważ dzieje się to po pełnym załadowaniu strony i zakończeniu działania całego kodu w różnych $(document).ready()programach obsługi.

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

Jose Basilio
źródło

1

czy mogę importować zewnętrzne skrypty przy użyciu tej metody?

krzyżma

1

Jasne, jeśli już to robisz wewnątrz $ (document) .ready (), nie będzie inaczej.

Jose Basilio

7

Ta odpowiedź była dla mnie przydatna, ponieważ nie zdawałem sobie sprawy, że kod jquery jest uruchamiany sekwencyjnie

Sevenearths

1

Dziękuję bardzo! To rozwiązało mój problem z .height () polegający na tym, że nie uzyskiwał prawidłowej wysokości, ponieważ strona (najwyraźniej) nie została jeszcze załadowana.

Jon

6

W JQuery 3.0 należy używać składni, $(window).on('load', function() { });ponieważ $ (window) .load () jest przestarzałe.

Alex H

13

Ten blok kodu rozwiązuje mój problem,

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

Rozwiń fragment

Agah Toruk
źródło

Jak uruchomić funkcję jQuery, aby sprawdzić, czy jQuery jest już załadowana? To zadziała tylko wtedy, gdy jQuery zostanie załadowane przed sprawdzeniem.

HelpNeeder

11

Wiele $(document).ready()zostanie uruchomionych w kolejności z góry na dół na stronie. Ostatni $(document).ready()zostanie uruchomiony jako ostatni na stronie. W ostatnim $(document).ready()możesz wywołać nowe zdarzenie niestandardowe, które zostanie uruchomione po wszystkich innych.

Opakuj swój kod w procedurę obsługi zdarzeń dla nowego zdarzenia niestandardowego.

<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
źródło

3

Od tutaj :

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

Będzie to czekać, aż jQuery zostanie załadowane, aby go użyć, ale możesz użyć tej samej koncepcji, ustawiając zmienne w innych skryptach (lub sprawdzając je, jeśli nie są one Twoim skryptem), aby poczekać, aż zostaną załadowane, aby ich użyć.

Na przykład w mojej witrynie używam tego do asynchronicznego ładowania JS i czekania, aż skończą, zanim zrobię cokolwiek z nimi za pomocą 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
źródło

Będzie to czekać tylko do załadowania jQuery i pominie inne aspekty strony. To nic innego jak hack dla starszych wersji greasemonkey, które nie obsługują dyrektywy @require.

Cheekysoft

1

Dodałem swój kod jako przykład tego, jak użyłem tej samej koncepcji z jQuery, aby poczekać, aż załaduje się inny kod.

Chris Doggett

1

Okazuje się, że ze względu na osobliwą mieszankę frameworków javascript, których potrzebowałem do zainicjowania skryptu za pomocą nasłuchiwania zdarzeń dostarczonego przez jeden z innych frameworków.

krzyżmo
źródło

4

Cieszę się, że znalazłeś rozwiązanie, ale Twoja odpowiedź nie jest przydatna dla innych bez dodatkowych szczegółów ...

Andrew

1

Czy próbowałeś załadować wszystkie funkcje inicjalizacyjne przy użyciu $().readyfunkcji jQuery, którą chciałeś ostatnio?

Być może możesz użyć setTimeout()na$().ready funkcji, którą chciał uruchomić, wywołując funkcjonalność chciał obciążeniem.

Lub użyj setInterval()i sprawdź interwał, aby zobaczyć, czy wszystkie inne funkcje ładowania zostały zakończone (zapisz status w zmiennej boolowskiej). Po spełnieniu warunków można anulować interwał i uruchomić funkcję ładowania.

Richard Clayton
źródło

Nie jestem pewien, co masz na myśli. Sugerujesz, żebym zaimportował wszystkie skrypty za pomocą skryptu jquery i umieścił mój skrypt na końcu? Jeśli tak, jak by to wyglądało (z zawodu jestem projektantem, więc nie używaj wielkich słów :))

chrism

$ (document) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});

Richard Clayton

wszystkie inne skrypty są plikami zewnętrznymi, więc nie jestem pewien, czy to zadziała, prawda?

krzyżma

@chrism: Zobacz mój drugi przykład. Czeka, aż zostaną ustawione zmienne wskazujące, że inne zewnętrzne pliki JS zostały załadowane, zanim cokolwiek zrobi. Po prostu umieszczasz kod, który chcesz uruchomić jako ostatni, w mojej metodzie JS_ready (). Robi dokładnie to, czego szukasz.

Chris Doggett

2

Po prostu użyj$(window).load(function(){...})

Ryan Taylor

Opóźnianie skryptu jquery, dopóki wszystko inne nie zostanie załadowane

Odpowiedzi: