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 通用javascript函数库整理
Aug 14 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Element Badge标记的使用方法
Jul 27 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 删除数组元素
2009/01/16 PHP
php 表单验证实现代码
2009/03/10 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP中的use关键字概述
2014/07/23 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
js+css实现打字效果
2020/06/24 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
英文自我鉴定
2013/12/10 职场文书
电气工程师岗位职责
2014/01/01 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
小学生表扬稿范文
2015/05/05 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
二审答辩状格式
2015/05/22 职场文书
运动会观后感
2015/06/09 职场文书
2016年端午节寄语
2015/12/04 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书