怎么判断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 变量命名规则
Sep 23 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
搭建vue开发环境
Jul 19 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
js实现旋转的星空效果
Nov 01 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
JS如何使用剪贴板操作Clipboard API
May 17 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授权问题总结
2007/05/06 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
模具设计与制造专业推荐信
2014/02/16 职场文书
拉拉队口号
2014/06/16 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫