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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Three.js基础部分学习
Jan 08 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
关于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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
人大复印资料处理程序_输入篇
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python之import机制详解
2014/07/03 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
医院后勤自我鉴定
2013/10/13 职场文书
实习单位推荐信范文
2013/11/27 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
商务英语专业求职信
2014/06/26 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
导游词之河北野三坡
2019/12/11 职场文书