js 判断脚本加载完毕的代码


Posted in Javascript onJuly 13, 2011
if(this.isIE) { 
js.onreadystatechange=function(){if(js.readyState=="loaded" || js.readyState=="complete") callback();} 
}else{js.onload=function(){callback();}} 
js.onerror=function(){alert('Not Found (404): '+src)}//chrome

JS判断脚本是否加载完成

在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?
我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete),当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。
对于 readyState 状态需要一个补充说明:
在 interactive 状态下,用户可以参与互动。
Opera 其实也支持 js.onreadystatechange,但他的状态和 IE 的有很大差别。
具体实现代码如下:

function include_js(file) { 
var _doc = document.getElementsByTagName('head')[0]; 
var js = document.createElement('script'); 
js.setAttribute('type', 'text/javascript'); 
js.setAttribute('src', file); 
_doc.appendChild(js); 
if (!/*@cc_on!@*/0) { //if not IE 
//Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload 
js.onload = function () { 
alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload'); 
} 
} else { 
//IE6、IE7 support js.onreadystatechange 
js.onreadystatechange = function () { 
if (js.readyState == 'loaded' || js.readyState == 'complete') { 
alert('IE6、IE7 support js.onreadystatechange'); 
} 
} 
} 
return false; 
} 
//execution function 
include_js('https://3water.com/jslib//jquery/jquery.js');
Javascript 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 #Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 #Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 #Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 #Javascript
一些实用的jQuery代码片段收集
Jul 12 #Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 #Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 #Javascript
You might like
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php数据序列化测试实例详解
2017/08/12 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
vue中appear的用法
2017/08/17 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python打开使用的方法
2019/09/30 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
预备党员承诺书
2014/03/25 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
小学推普周活动总结
2015/05/07 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS