怎么判断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 函数中的参数使用分析
Mar 27 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
浅说js变量
May 25 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
PM2自动部署代码步骤流程总结
Dec 10 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python3如何判断三角形的类型
2020/04/12 Python
python如何调用java类
2020/07/05 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
.NET面试问题集
2015/12/08 面试题
销售主管岗位职责
2014/02/08 职场文书
药店促销活动总结
2014/07/10 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
Nginx HTTP跳转至HTTPS
2022/05/15 Servers