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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
用js遍历 table的脚本
Jul 23 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
js换图片效果可进行定时操作
2014/06/09 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python三级菜单的实例
2017/09/13 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python取代netcat过程分析
2018/02/10 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
制药工程专业个人求职自荐信
2014/01/25 职场文书
研究生毕业鉴定
2014/01/29 职场文书
关于教师节的广播稿
2014/09/10 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书