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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
关于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
Laravel 5 框架入门(三)
2015/04/09 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
web css实现整站样式互相切换
2013/10/29 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python追加元素到列表的方法
2015/07/28 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
利用python 下载bilibili视频
2020/11/13 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
英语教学随笔感言
2014/02/20 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
负责人任命书范本
2014/06/04 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers