Можно ли отложить загрузку jQuery? - PullRequest
Новая
       95

Можно ли отложить загрузку jQuery?

65 голосов
/ 02 мая 2011

Посмотрим правде в глаза, jQuery / jQuery-ui - это тяжелая загрузка.

Google рекомендует отложенная загрузка JavaScript для ускорения начального рендеринга.Моя страница использует jQuery для настройки некоторых вкладок, которые расположены низко на странице (в основном вне начального вида), и я хотел бы отложить jQuery до ПОСЛЕ отображения страницы.

Код отсрочки Google добавляет тегв DOM после загрузки страницы путем подключения к событию onLoad тела: 

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

Я бы хотел отложить загрузку jQuery таким образом, но когда я попробовал это, мой код jQuery не смог найти jQuery (несовершенно неожиданно с моей стороны): 

$(document).ready(function() {
    $("#tabs").tabs();
});

Так что, похоже, мне нужно найти способ отложить выполнение моего кода jQuery до загрузки jQuery.Как определить, что добавленный тег завершил загрузку и анализ?

Как следствие, представляется, что асинхронная загрузка также может содержать ответ.

Есть мысли?

Ответы [ 15 ]

1 голос
/ 02 мая 2011

Следующий код должен загрузить ваши скрипты после завершения загрузки окна: 

<html>
<head>
    <script>
    var jQueryLoaded = false;
    function test() {
        var myScript = document.createElement('script');
        myScript.type = 'text/javascript';
        myScript.async = true;
        myScript.src = jQueryLoaded ? 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js';
        document.body.appendChild(myScript);

        if(!jQueryLoaded){
            alert('jquery was loaded');
            jQueryLoaded = true;
            test();
        } else {
            alert('jqueryui was loaded');   
        }
    }

    if (window.addEventListener){
        alert('window.addEventListener');
        window.addEventListener("load", test, false);
    } else if (window.attachEvent){
        alert('window.attachEvent');
        window.attachEvent("onload", test);
    } else{
        alert('window.onload');
        window.onload = test;
    }
    </script>
</head>
<body>
<p>Placeholder text goes here</p>
</body>
</html>

Работал для меня в Chrome, FF и IE9 - дайте мне знать, если это поможет

0 голосов
/ 14 января 2016

Я добавляю этот фрагмент кода после тега сценария async / defred jquery, он определяет временную функцию $, которая будет накапливать все, что нужно для запуска, когда все будет загружено, а затем, как только мы закончим, используем $ that к этому времени будет перезаписано выполнение функций. С этим фрагментом кода нет необходимости изменять синтаксис загрузки jQuery далее в документе. 

<script defer async src="https://code.jquery.com/jquery-2.2.0.min.js">
<script>
    var executeLater = [];
    function $(func) {
        executeLater.push(func);
    }
    window.addEventListener('load', function () {
        $(function () {
            for (var c = 0; c < executeLater.length; c++) {
                executeLater[c]();
            }
        });
    })
</script>

.... а потом ... 

<script>
    $(function() {
        alert("loaded");
    });
</script>
0 голосов
/ 07 февраля 2014

Загрузка всех сценариев в конце html с помощью http://labjs.com, это 100% решение, и я много раз проверял его на соответствие правилам gtmetrixпример http://gtmetrix.com/reports/interactio.cz/jxomHSLV

0 голосов
/ 29 мая 2011

Взгляните jQuery.holdReady()

"Содержит или освобождает выполнение события готовности jQuery."(jQuery 1.6 +)

http://api.jquery.com/jQuery.holdReady/

0 голосов
/ 02 мая 2011

Появляется, что вам просто нужно <script defer>: http://www.w3schools.com/tags/att_script_defer.asp

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...