使用回退加载jquery核心异步

时间:2014-02-20 13:39:35

标签: jquery asynchronous pagespeed

在头文件中使用性能优化和非阻塞脚本,我一直在尝试异步加载jquery本身。

我遇到了一个jQuery Loader脚本, async 加载了jquery,然后捕获并排队jquery文档就绪调用。这似乎在大多数时间都有效,但并非总是如此。

因此,如果加载程序未在x秒内完成,我创建了一个后备来加载本地jquery版本。后备工作,但不完全。有些部分可能有效,有些则无效。

在加载jquery加载器脚本后,到目前为止调用的脚本:

<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核心 插件/脚本/方向寻找。

  4. 为了澄清,我不是在考虑使用jQuery异步加载脚本,而是异步加载jquery本身,同时支持在某个地方加载jquery依赖脚本。

2 个答案:

答案 0 :(得分:1)

如果你想先加载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 */

});

希望解决你的问题!

答案 1 :(得分:0)

如果没有从本地源加载成功加载,首先从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>

来自Load jQuery with Javascript and use jQuery

在您的代码中,只有在未加载时才应加载jQuery&amp;检查Firebug(网络标签)中是否有错误拼写的文件路径