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

Попробуйте это, это я недавно редактировал в букмарклете jQuerify. Я часто использую его для загрузки jQuery и выполнения вещей после его загрузки. Конечно, вы можете заменить URL-адрес своим собственным URL-адресом на свой настроенный jquery.

(function() {
      function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
            done=false;
        script.onload=script.onreadystatechange = function(){
          if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
          }
        };
        head.appendChild(script);
      }
        getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
            // YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
        });
    })();

Я бы действительно объединил jQuery и jQuery-UI в один файл и использовал бы его URL-адрес. Если вы ДЕЙСТВИТЕЛЬНО хотели загрузить их по отдельности, просто добавьте в цепочку getScripts:

getScript('http://myurltojquery.js',function(){
        getScript('http://myurltojqueryUI.js',function(){
              //your tab code here
        })
});

Поскольку это вопрос наивысшего рейтинга по важной теме, позвольте мне проявить смелость, чтобы высказать свое мнение по этому поводу, основанное на предыдущем ответе от @valmarv и @amparsand.

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

var dfLoadStatus = 0;
var dfLoadFiles = [
      ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
      ["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
       "/js/somespecial.js",
       "/js/feedback-widget.js#2312195",
       "/js/nohover.js"]
     ];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for(var i = 0; i<dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function() {
        if ( ! this.readyState || 
               this.readyState == 'complete') {
            dfLoadStatus--;
            if (dfLoadStatus==0) downloadJSAtOnload();
        }
    };
    document.body.appendChild(element);
  }

}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Он загружает первый jquery после того, как он загружен, он продолжает одновременно загружать другие скрипты. Вы можете легко добавлять скрипты, добавляя их в массив в любом месте вашей страницы:

dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js", "/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);

Вот хорошее описание современного подхода к асинхронной / отложенной загрузке javascript. Но это не работает для встроенных скриптов.

<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" defer>
    $(function () {   //  <- jquery is not yet initialized
      ...
    });
</script>

Самое простое решение для асинхронной загрузки было предложено сценарием @nilskp - externalize:

<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" src="resources/js/onload.js" defer></script>

element.addEventListener("load", function () {
    $('#tabs').tabs()
}, false);

Попробуй это.

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

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

Поместите jQuery и ваш зависимый от jQuery код в конец вашего HTML-файла.

Изменить: немного более ясно

<html>
<head></head>
<body>
    <!-- Your normal content here -->
    <script type="text/javascript" src="http://path/to/jquery/jquery.min.js"></script>
    <script>//Put your jQuery code here</script>
</body>
</html>

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

<script type="text/javascript">
    (function (window) {

        window.jQueryHasLoaded = false;

        document.body.addEventListener('jqueryloaded', function (e) {
            console.log('jqueryloaded ' + new Date() );
        }, false);

        function appendScript(script) {
            var tagS = document.createElement("script"), 
                s = document.getElementsByTagName("script")[0];
            tagS.src = script.src;
            s.parentNode.insertBefore(tagS, s);

            if ( script.id == 'jquery' ) {
                tagS.addEventListener('load', function (e) {
                    window.jQueryHasLoaded = true;
                    var jQueryLoaded = new Event('jqueryloaded');
                    document.body.dispatchEvent(jQueryLoaded);
                }, false);
            }
        }

        var scripts = [
            {
                'id': 'jquery',
                'src': 'js/libs/jquery/jquery-2.0.3.min.js'
            },
            {
                'src': 'js/myscript1.js'
            },
            {
                'src': 'js/myscript2.js'
            }
        ];

        for (var i=0; i < scripts.length; i++) {
            appendScript(scripts[i]);
        }

    }(window));
</script>

Затем оберните свои зависимости функцией:

// myscript1.js 
(function(){ 

    function initMyjQueryDependency() {
        console.log('my code is executed after jquery is loaded!');
        // here my code that depends on jquery
    }

    if ( jQueryHasLoaded === true )
        initMyjQueryDependency();
    else
        document.body.addEventListener('jqueryloaded', initMyjQueryDependency, false);

}());

Если jquery завершает загрузку после других сценариев, ваши зависимости будут выполнены при запуске события jqueryloaded.

Если jquery уже загружен, jQueryHasLoaded === true, ваша зависимость будет выполнена initMyjQueryDependency().

Мне кажется, все, что вам нужно сделать, это либо а) добавить код jQuery, который вы хотите запустить при загрузке, в конец файла jQuery, либо б) добавить его к функции downloadJSAtOnload следующим образом:

<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);
 $("#tabs").tabs(); // <==== NOTE THIS. This should theoretically run after the
                    // script has been appended, though you'll have to test this
                    // because I don't know if the JavaScript above will wait for
                    // the script to load before continuing
 }

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

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

<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 - дайте мне знать, поможет ли это

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

var deferredJSFiles = ['jquery/jquery', 'file1', 'file2', 'file3'];
function downloadJSAtOnload() {
    if (!deferredJSFiles.length)
        return;
    var deferredJSFile = deferredJSFiles.shift();
    var element = document.createElement('script');
    element.src = deferredJSFile.indexOf('http') == 0 ? deferredJSFile : '/js/' + deferredJSFile + '.js';
    element.onload = element.onreadystatechange = function() {
        if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')
            downloadJSAtOnload();
    };
    document.body.appendChild(element);
}
if (window.addEventListener)
    window.addEventListener('load', downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent('onload', downloadJSAtOnload);
else
    window.onload = downloadJSAtOnload;

Я думаю, что здесь стоит упомянуть Modernizr.load () - он очень хорошо обрабатывает загрузку зависимостей.

Есть простой прием, который использует Google Analytics.

Подготовка

1. В заголовок HTML-кода добавьте крошечный скрипт

<script>
    window.jQuery_store = [];
    window.jQueryReady = function (fn) { jQuery_store.push(fn); }
</script>

Функция jQueryReady просто сохранит делегатов в массив для будущего использования.

2. Создайте новый JS-скрипт jquery-ready.js со следующим содержанием:

// When jQuery is finaly ready
$(function() {
    // Replace previous implementation
    window.jQueryReady = function(fn) {
        // jQuery is loaded call immediately
        fn();
    }
    
    // Call all saved callbacks
    for (var i = 0; i < window.jQuery_store.length; ++i) {
        try {
            window.jQuery_store[i]();
        } catch (err) {
            console.log(err);
        }
    }
})

Когда этот скрипт загружен, он:

• Подождите, пока jQuery станет безопасным для использования
• Заменит функцию jQueryReady на новую, которая просто вызывает делегат немедленно (jQuery готов в данный момент).
• Перебирать функции, сохраненные из предыдущих jQueryReady вызовов.

3. Соберите все вместе. Сделайте так, чтобы jquery-ready.js загружался только после загрузки jQuery. В нижнем колонтитуле у вас будет:

<script defer src=".../jquery.min.js">
<script defer src=".../bootstrap.min.js">
... any other plugins for jQuery you probably need
<script defer src=".../jquery-ready.js">

Это гарантирует, что сценарий jquery-ready.js будет выполнен только после выполнения jQuery.

использование

Теперь вы можете использовать функцию jQueryReady, когда захотите.

jQueryReady(function() {
    // jQuery is safe to use here
    $("div.to-be-hidden").hide();
})

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

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

«Удерживает или отменяет выполнение события готовности jQuery». (jQuery 1.6+)

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

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