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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js异步编程小技巧详解
Aug 14 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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聊天室技术
2006/10/09 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
jquery键盘事件介绍
2011/01/31 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
javascript轮播图算法
2016/10/21 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python切割图片的示例
2020/11/12 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
文明村创建实施方案
2014/03/27 职场文书
小学英语教学随笔
2015/08/14 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技