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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 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中文转拼音的实现代码
2014/02/11 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Numpy中的mask的使用
2018/07/21 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
老公给老婆的保证书
2014/04/28 职场文书
离婚协议书范本样本
2014/08/19 职场文书
介绍信的写法
2015/01/31 职场文书
财务统计员岗位职责
2015/04/14 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL