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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
在视频前插入广告
2006/11/20 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python os模块介绍
2014/11/30 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
实习指导老师意见
2015/06/04 职场文书
红歌会主持词
2015/07/02 职场文书
礼仪培训心得体会
2016/01/22 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python