Загрузить jquery после полной загрузки страницы

Я ищу способ загрузки jquery после полной загрузки страницы.
Здесь есть много вопросов и ответов, но все описывают, как запустить script, который требует jquery после полной загрузки страницы или jquery.
Я ищу, чтобы загрузить страницу, а затем вызвать jquery и после загрузки jquery вызвать функции. что-то вроде:

document.onload=function(){
   var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
//Here I need an event to know that jquery is 
//loaded to run stuff that needs jquery
}

Ответ 1

Попробуйте следующее:

 $(document).ready(function() {
// When the document is ready
// Do something  
});

Ответ 2

Вы также можете использовать:

$(window).bind("load", function() { 
    // Your code here.
});

Ответ 3

Для вашей проблемы решение может заключаться в подключении CDN, размещенного в Google, с помощью определенной библиотеки:

https://developers.google.com/speed/libraries/devguide

Кроме того, вы можете добавить это в нижней части страницы (непосредственно перед </body>):

<script type="text/javascript">
(function() {
    var script = document.createElement('script')
    script.setAttribute("type", "text/javascript")
    script.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js")
    document.getElementsByTagName("head")[0].appendChild(script)
})();
</script>

Однако, на мой взгляд, это рискованно. У вас асинхронный вызов для jquery, поэтому ваш jquery должен ждать, пока он загрузится (т.е. $(document).ready в этом случае не будет работать). Таким образом, мой ответ будет: использовать CDN, например google; поместите свой javascript на дно непосредственно перед </body>; и игнорировать флаги от профилировщиков.

Ответ 4

Рекомендуется загрузить ваши скрипты в нижней части блока <body>, чтобы ускорить загрузку страницы, например:

<body>
<!-- your content -->
<!-- your scripts -->
<script src=".."></script>
</body>
</html>

Ответ 5

Вы можете попробовать использовать свою функцию и использовать таймаут, ожидающий до загрузки объекта jQuery

код:

document.onload=function(){
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
    waitForjQuery();
}

function waitForjQuery() {
    if (typeof jQuery != 'undefined') {
        // do some stuff
    } else {
        window.setTimeout(function () { waitForjQuery(); }, 100);
    }
}

Ответ 6

Вы можете использовать функцию . onload. Он выполняет функцию, когда страница полностью загружена, включая графику.

window.onload=function(){
      // Run code
    };

Или другой способ: Включить скрипты в нижней части страницы.

Ответ 7

Я предполагаю, что вы загружаете jQuery в разделе <head> на своей странице. Хотя это не является вредным, это замедляет загрузку страницы. Попробуйте использовать этот шаблон, чтобы ускорить начальное время загрузки DOM-дерева:

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="">
</head>

<body>
    <!-- PAGE CONTENT -->

    <!-- JS -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(function() {
            $('body').append('<p>I can happily use jQuery</p>');
        });
    </script>
</body>

</html>

Просто добавьте свои скрипты в конец тэга <body>.

Есть несколько сценариев, которые должны быть в голове по практическим соображениям, самая известная библиотека - Modernizr

Ответ 8

если вы можете загрузить jQuery со своего собственного сервера, вы можете добавить это в свой файл jQuery:

jQuery(document).trigger('jquery.loaded');

то вы можете привязываться к этому инициированному событию.

Ответ 9

Включите свои скрипты на внизу страницы, прежде чем закрыть тег body.

Дополнительная информация ЗДЕСЬ.

Ответ 10

Если вы пытаетесь не загружать jquery, пока ваш контент не был загружен, лучший способ - просто поместить ссылку на него в нижней части вашей страницы, как и многие другие ответы.

Общие советы по использованию JQuery:

Использовать CDN. Таким образом, ваш сайт может использовать кешированную версию, которую пользователь, вероятно, имеет на своем компьютере. // в начале позволяет ему вызываться (и использовать тот же ресурс), будь то http или https. Пример:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

Поместите скрипты внизу. Переместите как можно больше ваших js в нижней части страницы. Я использую php для включения файла со всеми моими ресурсами JS ниже нижнего колонтитула.
Если вы используете систему шаблонов, вам может потребоваться распространение javascript на весь вывод html. Если вы используете jquery в сценариях, которые вызываются при отображении страницы, это приведет к ошибкам. В ваши сценарии ожидают загрузки jquery, поместите их в

window.onload() = function () { //... your js that isn't called by user interaction ... }

Это предотвратит ошибки, но все же будет работать до взаимодействия пользователя и без таймеров.

Конечно, если jquery кэшируется, это не имеет большого значения, где вы его помещаете, кроме инструментов скорости страницы, которые скажут вам, что вы блокируете рендеринг.