Отложить сценарий jquery до тех пор, пока все остальное не загрузится

112

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

Хотя, возможно, есть альтернатива $ (document) .ready, но я не смог ее найти.

javascript jquery dom миро
источник

217

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

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

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

Хосе Базилио
источник

1

могу ли я импортировать внешние скрипты с помощью этого метода?

chrism

1

Конечно, если вы уже делаете это внутри $ (document) .ready (), это не будет исключением.

Jose Basilio

7

Этот ответ был полезен для меня, потому что я не понимал, что код jquery запускается последовательно

Роберт Джонстон,

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 мне потребовалось запустить скрипт с помощью прослушивателя событий, предоставляемого одной из других фреймворков.

миро
источник

4

Счастлив, что вы нашли решение, но ваш ответ бесполезен для других ...

Эндрю

1

Вы пробовали загрузить все функции инициализации с помощью $().readyпоследней функции jQuery?

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

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

Ричард Клейтон
источник

Я не понимаю, что вы имеете в виду. Вы предлагаете, чтобы я импортировал все сценарии через сценарий jquery и просто оставил свой сценарий последним? Если да, то как бы это выглядело (я дизайнер по профессии, так что не используйте громких слов :))

chrism

$ (документ) .ready (функция () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});

Ричард Клейтон,

другие скрипты - это все внешние файлы, поэтому я не уверен, что это сработает, не так ли?

chrism

@chrism: См. мой второй пример. Он ждет, пока не будут установлены переменные, указывающие на загрузку других внешних файлов JS, прежде чем что-либо делать. Вы просто помещаете код, который хотите запустить последним, в мой метод JS_ready (). Он делает именно то, что вы ищете.

Крис Доггетт,

2

Просто используйте$(window).load(function(){...})

Райан Тейлор

Отложить сценарий jquery до тех пор, пока все остальное не загрузится

Ответы: