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 相关文章推荐
非常好的js代码
Jun 27 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
python通过文件头判断文件类型
2015/10/30 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
用Python shell简化开发
2018/08/08 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Django实现学生管理系统
2019/02/26 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python函数基本使用原理详解
2020/03/19 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
2014年学校后勤工作总结
2014/12/06 职场文书
2015年度物流工作总结
2015/04/30 职场文书
繁星春水读书笔记
2015/06/30 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang