上次说的jquery动态加载脚本，使用的是getScript（您可以点击相关文章查看），缺点和优点都说了。封装的函数是不自带缓存功能的，默认每次加载都刷新本地脚本。这样的一个特点对于网速不是很快的网站来说，那就是一个漫长的等待，虽然页面已经加载完毕了，但脚本还在路上，访客会以为脚本加载失败，就会反复的刷新页面，结果每次加载脚本都是重新获取的，造成资源的中断和大量的服务器请求。为了解决这个问题，我自己写了个方法，哈哈，当然是根据getScript把ajax方法打包到一个函数里便于多次复用。
<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
var url=(version=='' ¦¦ !version)?
src:
(
/\?.*/.test(src)?
src+'&v='+version.replace(/\s/g,''):
src+'?v='+version.replace(/\s/g,'')
);
$.ajax(
{
url:url,
cache:true,
type:'get',
dataType:'script',
success:function()
{
if(success && $.isFunction(success))
success();
},
error:function()
{
if(error && $.isFunction(error))
error();
}
});
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js',new Date().getTime().toString());
</script>
结果显而易见，客户端没有缓存脚本。而如果把version参数缓存固定值，那么就会在第一次加载之后缓存在客户端。
写到这里，不知道您有没有想到，那就是脚本加载失败怎么办？您可能注意到ajax的error函数了，我们试试看：
正确资源的情况：
<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
var url=(version=='' ¦¦ !version)?
src:
(
/\?.*/.test(src)?
src+'&v='+version.replace(/\s/g,''):
src+'?v='+version.replace(/\s/g,'')
);
$.ajax(
{
url:url,
cache:true,
type:'get',
dataType:'script',
success:function()
{
if(success && $.isFunction(success))
success();
},
error:function()
{
if(error && $.isFunction(error))
error();
}
});
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js','2012',function()
{
alert('加载成功');
},
function()
{
alert('加载失败');
});
</script>
会弹出“加载成功”！
如果资源是无效的：
<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
var url=(version=='' ¦¦ !version)?
src:
(
/\?.*/.test(src)?
src+'&v='+version.replace(/\s/g,''):
src+'?v='+version.replace(/\s/g,'')
);
$.ajax(
{
url:url,
cache:true,
type:'get',
dataType:'script',
success:function()
{
if(success && $.isFunction(success))
success();
},
error:function()
{
if(error && $.isFunction(error))
error();
}
});
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min2.js','2012',function()
{
alert('加载成功');
},
function()
{
alert('加载失败');
});
</script>
显然url是404的，但并没有弹出“加载失败”。
如果真的是这样的话，那么脚本加载失败，我们就没法控制了。我先前还想，如果脚本加载失败继续加载，看来得另辟蹊径了。