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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JSON相关知识汇总
Jul 03 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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
mysql5详细安装教程
2007/01/15 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
javascript常用的设计模式
2017/02/09 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
索桥的故事教学反思
2014/02/06 职场文书
个人融资协议书
2014/10/02 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
学习十八大的感悟
2015/08/11 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Python合并pdf文件的工具
2021/07/01 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis