怎么判断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 GUID生成器实现代码
Oct 31 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php中session与cookie的比较
2015/01/27 PHP
PDO::quote讲解
2019/01/29 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python处理大日志文件
2019/07/23 Python
python实现简单成绩录入系统
2019/09/19 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
python 将Excel转Word的示例
2021/03/02 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
会计电算化个人求职信范文
2014/01/24 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
团队经理竞聘书
2014/03/31 职场文书
保密工作责任书
2014/04/16 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
同学聚会邀请函
2015/01/30 职场文书
关于迟到的检讨书
2015/05/06 职场文书
刑事起诉书范文
2015/05/19 职场文书
学前教育见习总结
2015/06/23 职场文书
人民币符号
2022/02/17 杂记
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS