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 相关文章推荐
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python代码实现ID3决策树算法
2017/12/20 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python中的json总结
2018/10/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
电力安全学习心得体会
2016/01/18 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js