javascript loadScript异步加载脚本示例讲解

 更新时间:2013年11月14日 16:28:50   作者:  
本文讲解了javascript异步加载脚本并触发回调函数的方法,在加载远程数据的时候可以用到,下面提供代码示例和源码

一、语法:
loadScript(url[,callback])
或者
loadScript(settings)
二、settings支持的参数:
url:脚本路径
async:是否异步,默认false(HTML5)
charset:文件编码
cache:是否缓存,默认为true
success:加载成功后执行的函数,优先执行callback。
三、调用举例:

复制代码 代码如下:

//loadScript(url[,callback])
loadScript(“http://code.jquery.com/jquery.js”);
loadScript(“http://code.jquery.com/jquery.js”,function(){
console.log(1)
});
//loadScript(settings)
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”cache”:false});
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”success”:function(){
console.log(2)
}});
//或者你可以酱紫:
//loadScript(settings[,callback])
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″},function(){
console.log($)
});

四、源代码:
复制代码 代码如下:

function loadScript(url,callback) {
var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement,
script,
options,

if (typeof url === “object”) {
options = url;
url = undefined;
}
s = options || {};
url = url || s.url;
callback = callback || s.success;
script = document.createElement(“script”);
script.async = s.async || false;
script.type = “text/javascript”;
if (s.charset) {
script.charset = s.charset;
}
if(s.cache === false){
url = url+( /\?/.test( url ) ? “&” : “?” )+ “_=” +(new Date()).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
if(callback){
document.addEventListener ? script.addEventListener(“load”, callback, false) : script.onreadystatechange = function() {
if (/loaded|complete/.test(script.readyState)) {
script.onreadystatechange = null
callback()
}
}
}
}

相关文章

  • jquery中的mouseleave和mouseout的区别 模仿下拉框效果

    jquery中的mouseleave和mouseout的区别 模仿下拉框效果

    不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
    2012-02-02
  • jQuery插件开发汇总

    jQuery插件开发汇总

    这篇文章主要为大家详细介绍了jQuery插件开发的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery自动添加表单项的方法

    jQuery自动添加表单项的方法

    这篇文章主要介绍了jQuery自动添加表单项的方法,涉及jquery中append方法动态添加表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • jquery清空textarea等输入框实现代码

    jquery清空textarea等输入框实现代码

    jquery清空textarea等输入框在工作中很常见,接下来的代码简单实用,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • JQuery+CSS提示框实现思路及代码(纯手工打造)

    JQuery+CSS提示框实现思路及代码(纯手工打造)

    纯手工打造、兼容性还哦可、可移植任何项目感兴趣的朋友可以学习下,希望对你的jquery提升有所帮助
    2013-05-05
  • jQuery+Ajax实现限制查询间隔的方法

    jQuery+Ajax实现限制查询间隔的方法

    这篇文章主要介绍了jQuery+Ajax实现限制查询间隔的方法,涉及jQuery的ajax方法参数设置及asp.net后台交互的相关技巧,需要的朋友可以参考下
    2016-06-06
  • jquery操作select取值赋值与设置选中实例

    jquery操作select取值赋值与设置选中实例

    下面小编就为大家带来一篇jquery操作select取值赋值与设置选中实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • [jQuery] 事件和动画详解

    [jQuery] 事件和动画详解

    这篇文章主要介绍了JQ事件和动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • jQuery 查找元素操作实例小结

    jQuery 查找元素操作实例小结

    这篇文章主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下
    2019-10-10
  • jQuery-App输入框实现实时搜索

    jQuery-App输入框实现实时搜索

    这篇文章主要为大家详细介绍了jQuery-App输入框实现实时搜索,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论