2009十二月10
js 动态加载的简单实现
要做的功能很简单，以减少Http请求为目标，如果Http请求不能减少，那么尽量减小每次Http请求传输的时间，即下载文件的大小。所以我把一个不需要实时下载的js进行了动态加载处理。
页面呢就是我上一篇文章说的邮箱登录，一般只有在用户点击提交的时候才需要我做一些逻辑处理，加载js来获取用户选择要登录邮箱的提交地址。
代码实现如下：
function loadJs(sid,jsurl,callback){
var nodeHead = document.getElementsByTagName('head')[0];
var nodeScript = null;
//不存在加载
if(document.getElementById(sid) == null){
nodeScript = document.createElement('script');
nodeScript.setAttribute('type', 'text/javascript');
nodeScript.setAttribute('src', jsurl);
nodeScript.setAttribute('id',sid);
if (callback != null) {
nodeScript.onload = nodeScript.onreadystatechange = function(){
if (nodeScript.ready) {
return false;
}
if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
nodeScript.ready = true;
callback();
}
};
}
nodeHead.appendChild(nodeScript);
} else {
if(callback != null){
callback();
}
}
}
var nodeHead = document.getElementsByTagName('head')[0];
var nodeScript = null;
//不存在加载
if(document.getElementById(sid) == null){
nodeScript = document.createElement('script');
nodeScript.setAttribute('type', 'text/javascript');
nodeScript.setAttribute('src', jsurl);
nodeScript.setAttribute('id',sid);
if (callback != null) {
nodeScript.onload = nodeScript.onreadystatechange = function(){
if (nodeScript.ready) {
return false;
}
if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
nodeScript.ready = true;
callback();
}
};
}
nodeHead.appendChild(nodeScript);
} else {
if(callback != null){
callback();
}
}
}
因为用户点击后，加载js，但是如果js已经存在则不必加载了，直接调用回调函数即可。所以在这里我没有移除script标签。简单测试了一下，貌似不会引发内存泄露。
不过有可能那个onload属性可能会有问题，明天我再仔细考虑一下吧。是不是应该移除，今天先这样吧，反正也没有上线。嗯~~
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/12/10/1666/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
这个有点深奥了，看不懂
[回复]
[回复]
没看明白在说什么。。
[回复]