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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
浅析Jquery操作select
Dec 13 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
js实现无缝轮播图特效
May 09 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jquery validate demo 基础
2015/10/29 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue mounted组件的使用
2018/06/18 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python中的全局变量如何理解
2020/06/04 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
EJB的角色和三个对象
2015/12/31 面试题
环境工程专业个人求职信
2013/12/05 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
党员个人公开承诺书
2014/08/29 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
导游词之江西赣州
2019/10/15 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
python标准库ElementTree处理xml
2022/05/20 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript