14

我正在寻找一种干净的方法来异步加载以下类型的 javascript 文件：一个“核心”js 文件（嗯，我们就叫它吧，哦，我不知道，“jquery！”哈哈），x 个 js依赖于正在加载的“核心”js 文件的文件，以及 y 个其他不相关的 js 文件。我有一些关于如何去做的想法，但不确定最好的方法是什么。我想避免在文档正文中加载脚本。

因此，例如，我希望以下 4 个 javascript 文件异步加载，并适当命名：


/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script

但这不起作用，因为不能保证在颜色插件之前加载 jQuery... 


(function() {
    var a=[
      '/js/my-contact-page-functions.js',
      '/js/jquery-1.4.2.min.js',
      '/js/jquery.color.js',
      'http://cdn.thirdparty.com/third-party-tracking-script.js',
    ],
    d=document,
    h=d.getElementsByTagName('head')[0],
    s,
    i,
    l=a.length;
    for(i=0;i<l;i++){
        s=d.createElement('script');
        s.type='text/javascript';
        s.async=true;
        s.src=a[i];
        h.appendChild(s);
    }
})();

几乎不可能异步加载jquery和颜色插件吗？（因为颜色插件要求首先加载 jQuery。）

我正在考虑的第一种方法是将颜色插件脚本与 jQuery 源合并到一个文件中。

然后我的另一个想法是像这样加载颜色插件：


$(window).ready(function() {
    $.getScript("/js/jquery.color.js");
});

有人对你将如何处理这件事有任何想法吗？谢谢！

4

5 回答 5

12

LABjs是专门针对这个问题制作的。

<script src="lab.js"></script>
<script>
  $LAB
    .script("jquery.js")
    .wait()
    .script("jquery.color.js")
    .script("jquery.otherplugin.js")
    .script("mylib.js")
    .wait()
    .script("unrelated1.js")
    .script("unrelated2.js");
</script>

$LAB如果它们真的不需要等待 jQuery 和您的其他脚本，您也可以将不相关的脚本放入它们自己的链中。

于 2010-05-05T22:56:24.423 回答
5

LabJS和RequireJS是目前两种流行的选择。它们都与 jQuery 一起工作，但采用的方法略有不同，因此您应该同时查看两者。

于 2010-05-08T15:03:36.320 回答
1

您可以利用YUI 加载器来注册您自己的模块和依赖项，然后加载它们。

您可以获得成功、失败甚至进度的完整挂钩，因此您可以挂钩任何您喜欢的异步操作。

于 2010-05-05T22:03:40.987 回答
0

由于您提到的原因，您将无法实现完全异步加载；依赖。

对于我的 10p，我会遵循 $.getScript() 路线。它基本上只是 $.ajax() 的包装器，因此以这种方式加载脚本将为您提供所需的异步加载。

于 2010-05-05T22:04:05.187 回答
0

有一个通用的 jquery 插件，可以异步加载 css 和 JS 文件，请参阅：http ://code.google.com/p/rloader/

于 2010-12-12T11:55:37.507 回答