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 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
15分钟上手vue3.0(小结)
May 20 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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分页显示制作详细讲解
2008/11/19 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
使用async-validator编写Form组件的方法
2018/01/10 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
开始着手第一个Django项目
2015/07/15 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python实现一组典型数据格式转换
2018/12/15 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
微笑面对生活演讲稿
2014/05/13 职场文书
离婚协议书范本2014
2014/10/27 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Pytorch可视化的几种实现方法
2021/06/10 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python