Загружать jquery асинхронно перед другими скриптами

Ответ 1

Я хотел бы запустить jQuery с атрибутом async и запустить другие несколько внешних скрипты асинхронно только после загрузки jquery.

Что это значит? Это звучит так же, как вы хотите сначала загрузить jQuery, а затем другие вещи, когда это будет сделано. Поэтому вы хотите загрузить его синхронно. Если вы все еще хотите использовать async, вы можете определить функцию onload, чтобы продолжить загрузку других вещей, как только jQuery будет готов. Или вы можете использовать defer. Оба они описаны здесь: https://davidwalsh.name/html5-async

Ответ 2

Это может быть то, что вы ищете:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl асинхронный загрузчик jQuery.

Он асинхронно загружает jQuery, не блокируя другие компоненты:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

jQl автоматически захватывает все вызовы jQuery().ready(), поэтому вы можете написать:

<script type="text/javascript">
  jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
  jQuery('document').ready(function(){
    alert('Hello world');
  });
</script>

jQl поставит в очередь эти вызовы функций и выполнит их, как только загрузится jQuery, и DOM будет готов, так как они будут выполняться обычным способом.

Ответ 3

Это большой пример использования для defer:

<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>

Ни один из этих тегов не будет блокировать рендеринг. Браузер может загружать jquery.js и custom.js параллельно. Он выполнит jquery.js, как только он будет загружен, и DOM будет загружен, а custom.js будет выполняться впоследствии.

К сожалению, есть несколько вопросов:

• Вы не можете использовать атрибут defer для встроенных скриптов.
• IE < 10 был задокументирован, чтобы вызвать сценарии с defer до неожиданно чередовать их выполнение.
• Я не могу найти никаких спецификаций, которые говорят, что сценарии с порядком defer предназначены для выполнения по порядку, просто они предназначены для выполнения после загрузки DOM.

Ответ 4

Эта функция умна для асинхронной загрузки javascript:

function loadScripts(urls, length, success){
    if(length > 0){
        script = document.createElement("SCRIPT");
        script.src = urls[length-1];
        console.log();
        script.onload = function() {
            console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
            loadScripts(urls, length-1, success);               
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    else
        if(success)
            success();
}

Применение:

urls = ['https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js',
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'
    ];

loadScripts(urls, urls.length, function(){
    /* Jquery and other codes that depends on other libraries here */

});

Эта функция умна для асинхронной загрузки css:

function loadLinks(urls, length, success){
    if(length > 0){
        link = document.createElement("LINK");
        link.href = urls[length-1];
        link.rel  = 'stylesheet';
        link.onload = function() {
            console.log('%c link: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
            loadLinks(urls, length-1);              
        };
        document.getElementsByTagName("head")[0].appendChild(link);
    }
    else
        if(success)
            success();
}

Применение:

links = [
        'https://www.amirforsati.ir/css/styles.css',
        'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css',
        'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'
        ];
loadLinks(links, links.length, function(){});

Вы можете использовать как css, так и функцию javascript для загрузки асинхронно css и js. используйте эти коды в файле, который загружается асинхронно:

<script async src="js/scripts.js"></script>

Ответ 5

<script>var JSdep = [
        ["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"],
        ["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === 'bootstrap'", "/bundle/bootstrap"],
        ["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === '1.12.1'", "/bundle/jqueryui"],
        ["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"],
    ]
</script>
<script type="text/javascript">
    var downloadJSAtOnload = function (e) {
        var src = e.srcElement.src.toString();
        //console.log("[jquery] loaded", src);
        for (var i = 0; i < JSdep.length; i++) {
            if (src.indexOf(JSdep[i][0]) !== -1) {
                if ((!JSdep[i][1]) || (eval(JSdep[i][1]))) {
                    console.log("[jquery] loaded ok", src);
                    break;
                } else {
                    console.log("[jquery] fail", src);
                    return;
                }
            }
        }
        if (i === JSdep.length) {
            console.log("[jquery] fallback loaded ok", src);
        }
        if (jqloaded) {
            return;
        }
        jqloaded = true;
        for (var i = 1; i < JSdep.length; i++) {
            //console.log("[jquery] loading", JSdep[i][0], JSdep[i][1], JSdep[i][2]);
            var raf2 = requestAnimationFrame || mozRequestAnimationFrame ||
                webkitRequestAnimationFrame || msRequestAnimationFrame;
            if (raf2) { window.setTimeout(dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]), 0); }
            else window.addEventListener('load', dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]));
        }
    }
    var downloadJSAtOnerror = function (e) {
        var src = e.srcElement.src.toString();
        console.log("[jquery] error", src);
        for (var i = 0; i < JSdep.length; i++) {
            if (src.indexOf(JSdep[i][0]) !== -1) {
                console.log("[jquery] failed try fallback", src);
                dljquery([JSdep[i][2], JSdep[i][1]]);
                return;
            }
        }
        console.log("[jquery] failed on fallback", src);
        return;
    }
    // Add a script element as a child of the body
    var dljquery = function (src) {
        //console.log("[jquery] start", src);
        var element = document.createElement("script");
        element.src = src[0];
        element.async = "async";
        try {
            document.body.appendChild(element);
        } catch (err) {
            console.log("[jquery] err", err);
        }
        if (element.addEventListener) {
            element.addEventListener("load", downloadJSAtOnload, false);
            element.addEventListener("error", downloadJSAtOnerror, false);
        } else if (element.attachEvent) {
            element.attachEvent("onload", downloadJSAtOnload);
            element.attachEvent("onerror", downloadJSAtOnerror);
        } else {
            element.onload = downloadJSAtOnload;
            element.onerror = downloadJSAtOnerror;
        }
    }
    //        var fb = "/bundle/jquery";

    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function () { window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); });
    else window.addEventListener('load', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]));

    var jqloaded = false;

    function doOnload() {
        console.log("[jquery] onload");
    }
    // Check for browser support of event handling capability
    if (window.addEventListener)
        window.addEventListener("load", doOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", doOnload);
    else window.onload = doOnload;
</script>

нашел это  У меня были проблемы с загрузкой загрузок иногда до jquery  теперь надеюсь, что это поможет другим  Я положил этот script на голову, но дал ошибку, не могу добавить appendChild сейчас /body и проверенные работы для всех браузеров, которые я пробовал scriptasync, но у него не было события, которые говорят мне, когда загрузка заканчивается и несколько раз загрузочная загрузка перед jquery и наоборот наоборот, потому что bootstrap зависит от jquery, мне пришлось загружать jquery, а затем запускать загрузить bootstrap сейчас я добавлю резервную копию

зафиксировал его

теперь он проверяет, что jq загружен

и только затем загружает другие

ok теперь его скопировать в папку