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跨页面保存变量做菜单的方法
Jan 17 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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加密解密的代码
2007/07/16 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue使用websocket的方法实例分析
2019/06/22 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
Python MD5加密实例详解
2017/08/02 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python导入坐标点的具体操作
2019/05/10 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
物流合作计划书
2014/01/10 职场文书
文员岗位职责范本
2014/03/08 职场文书
安全生产月标语
2014/10/07 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
初三毕业感言
2015/07/31 职场文书
安全教育培训制度
2015/08/06 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书