异步加载js文件和其他依赖的js文件
我正在寻找一种干净的方式来异步加载以下类型的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"); });
有没有人想过你会怎么做? 谢谢!
LabJS和RequireJS是目前两种流行的选择。 他们都使用jQuery但采用略有不同的方法,所以你应该看看两者。
LABjs专门针对这个问题而制作。
如果他们真的不需要等待jQuery和其他脚本,你也可以将不相关的脚本放入他们自己的$LAB
链中。
您可以利用YUI Loader 注册自己的模块和依赖项 ,然后加载它们。
您可以获得成功,失败甚至进度的完整钩子,因此您可以挂钩您喜欢的任何异步操作。
由于你提到的原因,你将无法实现完全异步负载; 依赖。
对于我的10p,我会遵循$ .getScript()路线。 它基本上只是$ .ajax()的包装器,因此以这种方式加载脚本将为您提供所需的异步加载。
有一个通用的jquery插件可以加载css和JS文件异步和同步,请参阅: http : //code.google.com/p/rloader/