Затримка сценарію jquery, поки все інше не завантажиться


112

У мене є сценарій jquery, який мені потрібно запускати лише раз, коли все інше на сторінці, включаючи деякі інші javascripts (над якими я не маю ніякого контролю) закінчив робити свою справу.

Я хоч, можливо, була альтернатива $ (document). Вже, але мені не вдалося його знайти.

Відповіді:


217

Ви можете мати $(document).ready()кілька разів на сторінці. Код запускається в тій послідовності, в якій він з'являється.

Ви можете використовувати $(window).load()подію для свого коду, оскільки це відбувається після повного завантаження сторінки та $(document).ready()закінчення роботи всього коду в різних обробниках.

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

1
чи можна імпортувати зовнішні скрипти за допомогою цього методу?
хризм

1
Звичайно, якщо ви вже робите це всередині $ (document) .ready (), це не буде інакше.
Хосе Басіліо

7
Ця відповідь мені була корисна, оскільки я не усвідомлював, що код jquery запускається послідовно
Sevenearths

1
Дуже дякую! Це вирішило мою проблему .height (), коли вона не отримала правильної висоти, оскільки сторінка (мабуть) ще не завантажена.
Джон

6
У JQuery 3.0 слід використовувати синтаксис, $(window).on('load', function() { });оскільки $ (window) .load () застарілий.
Alex H

13

Цей блок коду вирішує мою проблему,

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


Як можна запустити функцію jQuery, щоб побачити, чи jQuery вже завантажений? Це буде працювати лише тоді, коли jQuery завантажився до перевірки.
HelpNeeder

11

Кілька $(document).ready()запускаються, щоб зверху внизу сторінки. Останній $(document).ready()запуститься останнім на сторінці. Всередині останнього $(document).ready()можна запустити нову спеціальну подію, щоб відкрити всі інші.

Загорніть свій код у обробник подій для нової спеціальної події.

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

3

Від сюди :

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

Це зачекає, поки jQuery завантажується, щоб використовувати його, але ви можете використовувати ту саму концепцію, встановлюючи змінні в інших сценаріях (або перевіряючи їх, якщо вони не є вашим сценарієм), щоб чекати, поки вони завантажуються, щоб використовувати їх.

Наприклад, на своєму сайті я використовую це для асинхронного завантаження JS і чекаю, поки вони закінчать, перш ніж робити що-небудь з ними за допомогою 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> 

Це зачекає лише до завантаження jQuery та ігнорування інших аспектів сторінки. Це не що інше, як хак для старих версій greasemonkey, які не підтримують директиву @require.
Cheekysoft

1
Я додав свій код як приклад того, як я використовував ту саму концепцію з jQuery, щоб зачекати, поки інший код не завантажиться.
Кріс Доггетт

1

Виявляється, через своєрідну суміш фреймів JavaScript, що мені потрібно було ініціювати скрипт, використовуючи слухач подій, наданий одним з інших фреймворків.


3
Щасливий, що ти знайшов рішення, але твоя відповідь не корисна для інших без більш детальної інформації ...
Андрій

1

Ви спробували завантажити всі функції ініціалізації за допомогою $().readyзапущеної функції jQuery, яку ви хотіли останнього?

Може бути , ви можете використовувати setTimeout()на $().readyфункцію , яку ви хочете запустити, викликавши функцію ви хотіли навантаження.

Або скористайтеся setInterval()і перевірте інтервал, щоб перевірити, чи всі інші функції завантаження виконані (збережіть статус у булевій змінній). Коли умови будуть виконані, ви можете скасувати інтервал і запустити функцію навантаження.


Я не впевнений, що ти маєш на увазі під цим. Ви пропонуєте імпортувати всі сценарії через сценарій jquery і просто поставити свій скрипт останнім? Якщо так, як би це виглядало (я дизайнер по торгівлі, тому не використовуйте великих слів :))
chrism

$ (document) .ready (функція () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
Річард Клейтон

інші сценарії - це всі зовнішні файли, тож я не впевнений, що це спрацює, чи не так?
хризм

@chrism: Дивіться мій другий приклад. Він чекає, поки встановлені змінні, що вказує, що інші зовнішні файли JS завантажуються, перш ніж щось робити. Ви просто покладете код, який потрібно запустити останнім, у моєму методі JS_ready (). Це робить саме те, що ви шукаєте.
Кріс Доггетт

2
Просто використовуйте$(window).load(function(){...})
Райан Тейлор
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.