怎么判断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高级程序设计
Dec 29 Javascript
js 表格隔行颜色
Dec 02 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 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
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php实现点击可刷新验证码
2015/11/07 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python每天必学之bytes字节
2016/01/28 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python金融数据可视化汇总
2017/11/17 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python manage.py runserver流程解析
2019/11/08 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
中职应届生会计求职信
2013/10/23 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
我的长生果教学反思
2014/04/28 职场文书
python删除csv文件的行列
2021/04/06 Python