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


Posted in Javascript onNovember 14, 2013

一、语法:
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()
}
}
}
}
Javascript 相关文章推荐
JS中的substring和substr函数的区别说明
May 07 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
js 数据类型判断的方法
Dec 03 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 #Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 #Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 #Javascript
javascript按位非运算符的使用方法
Nov 14 #Javascript
javascript Array.prototype.slice的使用示例
Nov 14 #Javascript
js取消单选按钮选中示例代码
Nov 14 #Javascript
js实现目录定位正文示例
Nov 14 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python中特殊函数集锦
2015/07/27 Python
python实现手机通讯录搜索功能
2018/02/22 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
班长岗位职责
2013/11/10 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
活动倡议书范文
2014/05/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
团代会邀请函
2015/02/02 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技