怎么判断js脚本加载完成


Posted in Javascript onFebruary 28, 2014

在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?

我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete),当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。

对于 readyState 状态需要一个补充说明:

1.在 interactive 状态下,用户可以参与互动。
2.Opera 其实也支持 js.onreadystatechange,但他的状态和 IE 的有很大差别。

<script>
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;
}

include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');
</script>
Javascript 相关文章推荐
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
JS获取地址栏参数的几种方法小结
Feb 28 #Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 #Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 #Javascript
jQuery之选项卡的简单实现
Feb 28 #Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 #Javascript
flash遮住div问题的正确解决方法
Feb 27 #Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 #Javascript
You might like
php数组键名技巧小结
2015/02/17 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python随机数random模块使用指南
2016/09/09 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
详解Python中where()函数的用法
2018/03/27 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python 字符串池化的前提
2020/07/03 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
产品质量承诺范本
2014/03/31 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
导游词之云南丽江古城
2019/09/17 职场文书