JS动态插入并立即执行回调函数的方法


Posted in Javascript onApril 21, 2016

本文实例讲述了JS动态插入并立即执行回调函数的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.id = id;
 script.onload = script.onreadystatechange = function(){
  alert(script.readyState);
  if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
  script.onreadystatechange = script.onload = null
  if(callback) callback();
 }
 document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>

动态插入js文件在提高页面加载速度和跨域问题上有非常重要的作用。上面就是一个简单例子。

ie 上支持 onreadystatechange , 不支持 onload

firefox上支持 onload , 不支持onreadystatechange

ie上面不一定loaded 或者是 complete触发 , 或者两个都会触发,所以用或来判断。

需要注意的是script.onreadystatechange 和script.readyState 的大小写形式,不区分大小写就可能导致不易发现的错误。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
CCPry JS类库 代码
Oct 30 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
jQuery插件datatables使用教程
Apr 21 #Javascript
JavaScript预解析及相关技巧分析
Apr 21 #Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 #Javascript
JS实现队列与堆栈的方法
Apr 21 #Javascript
JS、jQuery中select的用法详解
Apr 21 #Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
You might like
基于header的一些常用指令详解
2013/06/06 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
基于javascript 闭包基础分享
2013/07/10 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
浅述python2与python3的简单区别
2018/09/19 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
计算机专业自荐信
2013/10/14 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
安全检查验收制度
2014/01/12 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
卖房协议书样本
2014/10/30 职场文书
保送生自荐信
2015/03/06 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
英镑符号 £
2022/02/17 杂记
人民币符号
2022/02/17 杂记