怎么判断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 相关文章推荐
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
vue中使用props传值的方法
May 08 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
Python中的pprint折腾记
2015/01/21 Python
python WindowsError的错误代码详解
2017/07/23 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python中求对数方法总结
2020/03/10 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
委托书样本
2014/04/02 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
指导教师推荐意见
2015/06/05 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python