怎么判断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.addClass始终无效原因分析
Sep 08 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
Vue渲染过程浅析
Mar 14 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
JavaScript实现滑动门效果
Jan 18 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
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python接口测试文件上传实例解析
2020/05/22 Python
python dict乱码如何解决
2020/06/07 Python
python如何设置静态变量
2020/09/07 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
合伙经营协议书范本
2014/04/18 职场文书
学校四风对照检查材料
2014/08/28 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
公务员政审个人总结
2015/02/12 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
党员理论学习心得体会
2016/01/21 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python