使用回退加载jquery核心异步 [英] Load jquery core asynchronous with fallback

问题描述

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

With performance optimization and non-blocking scripts in header, I've been trying to asynchronously load the jquery itself.

我遇到了 jQuery Loader 脚本， async 加载jquery，然后加载和队列jquery文件就绪电话。这似乎在大多数时间都有效，但并非总是如此。

I ran into a jQuery Loader script, that async loads jquery and thereafter catches and queues jquery document ready calls. This seems to work most of the time, but not always.

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

So I created a fallback to load a local jquery version if the loader hasn't finished within x seconds. The fallback works, but not completely. Some parts may work, others not.

在加载jquery加载程序脚本后，到目前为止调用的脚本：

Script so far called in head, after loading the jquery loader script:

<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）经验的人都可以帮助解决定期失败的
   问题吗？

1. Anyone with experience with jQuery Loader (jQl) that can help out fixing the issue that it fails regularly?

任何人都可以告诉我为什么，如果失败，只有我的其他一些
js脚本可以正常工作，但是有些一直在失败？

Anyone who can tell me why, incase of failure, only some of my other js scripts work, but some keep failing?

我非常愿意异步加载jquery核心以及其他一些
插件/脚本/方向来寻找。

I am very open to asynchronously loading jquery core with some other plugin/script/direction to look for.

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

To clarify, I am not looking at asynchronously loading scripts using jQuery, but loading the jquery itself asynchronously while supporting loading jquery dependent scripts somewhere down the road.

推荐答案

如果你想先加载jquery然后执行一些东西，我可以帮助你！

If you looking for loading jquery first and then execute something, i can help you!

最佳解决方案

我写了一个函数来加载你想要的大量脚本。

I wrote a function to load a lot of scripts in a row you want.

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

});

希望解决您的问题！

这篇关于使用回退加载jquery核心异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！