0 javascript jquery lazy-loading dynamic-script-loading
当使用importjs()类型的函数时(参见下面的示例),jQuery似乎在其后面的代码之前没有加载.
这是一个示例html文件:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function importjs(jsFile) {
var body = document.getElementsByTagName('head').item(0);
var scpt = document.createElement('script');
scpt.src = jsFile;
scpt.type = 'text/javascript';
body.appendChild(scpt);
}
var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
//importjs(f1);
var $j=jQuery;
alert("hello stackoverflow!");
</script>
</body>
</html>
使用上面的代码,警报应该成功触发.
接下来,注释掉第一个脚本块,即显式加载jQuery的脚本块,并取消注释第二个脚本块中的importjs(f1)行.这个时候,警报并没有开火,至少在Firefox和Safari.
现在,在"var $ j = jQuery"行之前添加一个额外的警报.对我来说,它适用于两种浏览器,无论我等待的时间长短.一个setTimeout可能也可以做到这一点,但它也不是一个像这样编程的理想方法.
如果javascript是单线程的,为什么importjs会失败？是因为importjs创建的新元素在第一个块完成之前不会被"执行",或者新元素是否应该在创建后立即执行？
这里有几个问题:
如果以这种方式加载脚本,依赖代码应该在回调函数中,动态添加的javascript将无法立即使用
function importjs(jsFile, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = jsFile;
script.type = 'text/javascript';
script.onload = script.onreadystatechange = function() {
// execute callback
if (callback) callback();
// prevent memory leak in IE
script.onload = null;
head.removeChild(script);
};
head.appendChild(script);
}
那你应该用它作为:
importjs("jquery.js", function(){
// all jQuery dependant code
// goes here...
});?
有一个更强大的解决方案,包括javascript文件,允许您:
我还在编写这个脚本,但现在几乎可以正常工作.一定要看看.
它结合了不同技术的优点,为页面加载时间带来了巨大的好处.以下是相关文章:无阻塞地加载脚本
语法是:
include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order