加载带有回退的jquery核心异步

Question

通过优化性能和头中的非阻塞脚本，我一直试图异步加载jquery本身。

我遇到了一个jQuery装载机脚本，异步加载jquery，然后捕获并排队jquery文档就绪调用。这似乎大部分时间都起作用，但并非总是如此。

因此，如果加载程序在x秒内还没有完成，我就创建了一个回退，以加载本地jquery版本。退路行得通，但不完全有效。有些部分可能起作用，另一些则不起作用。

在加载jquery加载器脚本之后，到目前为止调用head的脚本：

<script type="text/javascript">
function loadScript(url)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

var fallback_timer = setTimeout(function() {
    loadScript('/path/to/local/js/jquery.js');
},5000);
jQl.loadjQ('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',function({clearTimeout(fallback_timer);});

</script>

问题：

1. 谁有使用jQuery Loader (jQl)的经验，可以帮助解决它经常失败的问题？
2. 谁能告诉我为什么在失败的情况下，只有我的其他js脚本可以工作，但是有些脚本仍然失败？
3. 我非常愿意异步加载jquery核心，并提供一些其他的插件/脚本/方向。

为了澄清这一点，我不打算使用jQuery异步加载脚本，而是在支持加载jquery相关脚本的同时异步加载jquery本身。

Answer 1

首先从CDN加载jQuery，如果没有成功地从本地源加载。

我建议如下，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"></script>')</script>
<script type="text/javascript" src="scripts.js"></scripts>

来自用Javascript加载jQuery并使用jQuery

在您的代码中，您应该只在未加载jQuery时加载它&检查在Firebug (Net选项卡)中是否有拼写错误的文件路径。

Answer 2

如果您希望先加载jquery，然后执行某些操作，我可以帮助您！

最佳解

我编写了一个函数，将大量脚本加载到您想要的行中。

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(){
    /* Do something here after loading all script */

});

希望能解决你的问题！