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 上下滚动广告
Jun 17 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
el-form 多层级表单的实现示例
Sep 10 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实现批量压缩图片文件大小的脚本
2014/07/04 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
python模拟Django框架实例
2016/05/17 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python修改txt文件中的某一项方法
2018/12/29 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
大学生党性分析材料
2014/12/19 职场文书
少先队中队工作总结
2015/08/14 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript