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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
Javascript 命名空间模式
Nov 01 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
使用p5.js临摹动态图形
Oct 23 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
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
微信跳一跳python代码实现
2018/01/05 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
分析python请求数据
2018/08/19 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
numpy.random模块用法总结
2019/05/27 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
小学生安全保证书
2014/02/01 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
平面设计求职信
2014/03/10 职场文书
应届生求职自荐信
2014/07/04 职场文书
悬空寺导游词
2015/02/05 职场文书
小学运动会通讯稿
2015/07/18 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS