怎么判断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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue.js实现简单购物车功能
May 30 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 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
德生PL990的分析评价
2021/03/02 无线电
PHP开发文件系统实例讲解
2006/10/09 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
js实现简单的验证码
2015/12/25 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
求职自荐信
2013/12/14 职场文书
民事起诉状范文
2015/05/19 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS