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 相关文章推荐
使用正则替换变量
May 05 Javascript
jscript之List Excel Color Values
Jun 13 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
JavaScript的console命令使用实例
Dec 03 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP Socket 编程
2010/04/09 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
javascript简单性能问题及学习笔记
2014/02/04 Javascript
详解js闭包
2014/09/02 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
django框架如何集成celery进行开发
2017/05/24 Python
python监控文件并且发送告警邮件
2018/06/21 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python递归实现打印多重列表代码
2020/02/27 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
卫生系统先进事迹
2014/05/13 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
出售房屋委托书范本
2014/09/24 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年社区工作总结
2014/11/18 职场文书
干部考察材料范文
2014/12/24 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
用python自动生成日历
2021/04/24 Python
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技