怎么判断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 相关文章推荐
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
详解Vue的options
May 15 Vue.js
JavaScript实现栈结构详细过程
Dec 06 Javascript
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
Yii框架弹出框功能示例
2017/01/07 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python测试驱动开发实例
2014/10/08 Python
Python中的tuple元组详细介绍
2015/02/02 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python遍历路径破解表单的示例
2020/11/21 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
学校评语大全
2014/05/06 职场文书
环保小标语
2014/06/13 职场文书
班主任寄语2015
2015/02/26 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python实现机器学习算法的分类
2021/06/03 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
django中websocket的具体使用
2022/01/22 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技