在正常的加载过程中，js文件的加载是同步的，也就是说在js加载的过程中，浏览器会阻塞接下来的内容的解析。这时候，动态加载便显得尤为重要了，由于它是异步加载，因此，它可以在后台自动下载，并不会妨碍其它内容的正常解析，由此，便可以提高页面首次加载的速度。

那么，既然js是异步加载，我们又该如何判断它是否加载完成呢？

在IE或一些基于IE内核的浏览器中（如Maxthon）,它是通过script节点的readystatechange方法来判断的，而其它的一些浏览器中，往往是通过load事件来决定的，如下代码：

function include_js(file) {

    var _doc = document.getElementsByTagName('head')[0];

    var js = document.createElement('script');

    js.setAttribute('type', 'text/javascript');

    js.setAttribute('src', file);

    if (document.all) {

        js.onreadystatechange = function() {

            if (js.readyState == 'loaded' || js.readyState == 'complete') {

                alert('IE6、IE7 support js.onreadystatechange');

            }

        }

    } else {

        js.onload = function() {

            alert('Firefox、chrome and others support js.onload');

        }

    }

}

include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');

我们把该方法添加到body的load事件中，<body onload='dynamicLoad()'>，运行，会发现IE或Maxthon中，会弹出‘done’对话框，但是firefox或chrome中却完全没有反应，why?

这是因为，如果script节点没有添加到DOM树中，那么在chrome和firefox中是不会响应script的load事件的。但是IE中却可以。。修改后如下代码：

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 (document.all) {

        js.onreadystatechange = function() {

            if (js.readyState == 'loaded' || js.readyState == 'complete') {

                alert('IE6、IE7 support js.onreadystatechange');

            }

        }

    } else {

        js.onload = function() {

            alert('Firefox、chrome and others support js.onload');

        }

    }

}

include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');

[f]动态判断js加载完成的更多相关文章

  1. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  2. web项目中js加载慢问题解决思路

    最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...

  3. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  4. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  5. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  6. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  7. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  8. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  9. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

随机推荐

  1. Archlinux KDE 添加中文语言包

    From: https://wiki.archlinux.org/index.php/KDE_%28%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%29#.E8.AF.AD. ...

  2. archlinux 传统方法编译内核linux kernel 3.3.7

    From: http://hi.baidu.com/flashgive/item/eaef6326b5eb73d3a417b662 archlinux中传统方法编译内核 1)下载内核以及补丁并解压: ...

  3. PHP基于数组的分页函数(核心函数array_slice())

    关于数组的分页函数,用数组进行分页的好处是可以方便的进行联合多表查询,只需要将查询的结果放在数组中就可以了以下是数组分页的函数,函数page_array用于数组的分页,函数show_array用于分页 ...

  4. 了解 JavaScript 应用程序中的内存泄漏

    简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许多功能无需考虑内存管理 ...

  5. C#winform如何最小化主窗口

    1.如果不想让程序在任务栏中显示,请把窗体的属性ShowInTaskbar设置为false;2.如果想让程序启动时就最小化,请设置窗体的属性WindowState设置为Minimized.(Minim ...

  6. weed-fs 压力测试

    阅读<Weed-FS/杂草文件系统 小文件存储集群 安装 使用 测试>中提到weedfs的负载压力不是很好,在看过代码后进行了相应测试,未发现负载压力有何问题.   weedfs mast ...

  7. 关于Function.prototype.bind

    bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行 ...

  8. 第九十七天请假 PHP TP框架 MVC模式

    MVC : M->Model 模型(数据层)     V->View 视图(视图层)  C->Controller 控制器(逻辑层)            M : 操作数据(连接数据 ...

  9. Linux启动/停止/重启Mysql数据库的方法——转载

    Mysql启动.停止.重启常用命令 a.启动方式1.使用 service 启动:[root@localhost /]# service mysqld start (5.0版本是mysqld)[root ...

  10. 学习笔记001之[Android开发视频教学].01_15_Handler的使用（二）

    Handler 与线程 Bundle 的用法 在线程中处理消息的方法 待补充......