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 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
分享15个Webpack实用的插件!!!
Mar 31 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在线解压ZIP文件的方法
2014/12/30 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python中itertools模块用法详解
2014/09/25 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
社区母亲节活动方案
2014/03/05 职场文书
励志演讲稿范文
2014/04/29 职场文书
项目工作说明书
2014/07/29 职场文书
小学新教师个人总结
2015/02/05 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js