怎么判断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 attachEvent传递参数的办法
Dec 14 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
如何在vue中使用jointjs过程解析
May 29 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
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python imread、newaxis用法详解
2019/11/04 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
AOP的定义以及作用
2013/09/08 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
执行总经理岗位职责
2014/02/03 职场文书
小学语文业务学习材料
2014/06/02 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
成人成长感言如何写?
2019/08/16 职场文书
导游词之太原天龙山
2020/01/02 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL