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 相关文章推荐
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
JavaScript 闭包的使用场景
Sep 17 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禁止页面缓存的代码
2011/10/23 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python内建数据结构详解
2016/02/03 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python Socket使用实例
2017/12/18 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
校班主任推荐信范文
2013/12/03 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
2016年元旦寄语
2015/08/17 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python