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

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

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

  1. function dynamicLoad()
  2. {
  3. var _doc=document.getElementsByTagName('head')[0];
  4. var script=document.createElement('script');
  5. script.setAttribute('type','text/javascript');
  6. script.setAttribute('src','jquery-1.4.4.js');
  7. script.onload=script.onreadystatechange=function(){
  8. if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
  9. alert('done');
  10. }
  11. script.onload=script.onreadystatechange=null;
  12. }
  13. }

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

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

  1. function dynamicLoad()
  2. {
  3. var _doc=document.getElementsByTagName('head')[0];
  4. var script=document.createElement('script');
  5. script.setAttribute('type','text/javascript');
  6. script.setAttribute('src','jquery-1.4.4.js');
  7. _doc.appendChild(script);
  8. script.onload=script.onreadystatechange=function(){
  9. if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
  10. alert('done');
  11. }
  12. script.onload=script.onreadystatechange=null;
  13. }
  14. }

这时候，所有的浏览器都可以响应，你可以尝试一下~动态加载JS过程中如何判断JS加载完成

动态加载JS过程中如何判断JS加载完成的更多相关文章

  1. Js文件中调用其它Js函数的方法

    在项目开发过程中,也许你会遇这样的情况.在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能.我们知道,在h ...

  2. 加载dll过程中assembly失败

    错误现象: 进行插件读取时出现错误:“尝试从一个网络位置加载程序集,在早期版本的 .NET Framework 中,这会导致对该程序集进行沙盒处理.此发行版的 .NET Framework 默认情况下 ...

  3. Sqoop import加载HBase过程中，遇到Permission denied: user=root, access=WRITE, inode="/user":hdfs:supergroup:drwxr-xr-x

    在执行hbase sqoop抽取的时候,遇到了一个错误,如下图: 在执行程序的过程中,遇到权限问题很正常,也容易让人防不胜防,有问题就想办法解决,这个是关键. 解决办法如下: 第一步:su hdfs, ...

  4. 百度自动发贴，登录很顺利的模拟实现，但发贴攻关失败，能力有限，追JS过程中颇为痛苦

    攻关失败,且短期内看不到希望,看不到方向,且越来越焦急,目前已知的是,用根据用户的鼠标事件以一定的规则结合其他数据,服务器以这些数据验证是否为真正的手动发贴. 不过闲暇时实现了百度贴吧的自动签到. 较 ...

  5. VS使用过程中，编写JS没有智能提示解决方法

    问题:编写基本Script代码没有问题,但是在编写DOM代码时候没有智能提示.也就是在编写一般javascript代码时候没有问题,但是要写DOM代码的时候发现没有智能提示,如document等都需要 ...

  6. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  7. js：使用js过程中遇到的一个小问题

    在一个作业中使用了js,函数A调用函数B.当A和B中均含有变量i的时候,相关操作结果可能会出错. 将B中的i替换为j(j不存在于A中)后,结果正确. 目前考虑原因是两个变量i有相关性(或者说实际上就是 ...

  8. 当前JS文件中加入其他js文件

    注意:在html文件导入a.js时,应该把script></script写在/body>后面,否则 document.write()方法有问题. 在载入页面后,浏览器输出流自动关闭: ...

  9. js文件中引用其他js文件

    这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...

随机推荐

  1. Nginx 内置变量，细化规则，真实IP获取及限制连接请求

    希望下周测试之后能用起来!!!感觉很有用的. http://www.bzfshop.net/article/176.html http://www.cr173.com/html/19761_1.htm ...

  2. gridview两列数据的互换

    如下图所示: GridView绑定数据的时候,若ReName列里面有数据,则显示ReName列里面的数据,如果没有数据,则显示Name列里面的数据.Name和ReName是数据表里面的两个字段< ...

  3. 使用ownCloud搭建你的个人云服务(ubuntu 14.04 server)（ownCloud对文件不切片，Seafile对文件切片），owncloud没有存储的功能 只能同步 本地删除了服务器也会删除

    ownCloud是什么 ownCloud是一个自由且开源的个人云存储解决方案(类似百度网盘或者Dropbox),包括两个部分:服务器和客户端. ownCloud在客户端可通过网页界面,或者安装专用的客 ...

  4. 如何成为一个牛逼的C/C++程序员？

    这个题目的噱头太大,要真的写起来, 足够写一本书了. 本人是过来人, 结合自身的体会和大家交流一下,希望新人能少走弯路. 每个人的情况不一样,我下面的描述可能并不适合每一个看到这篇文章的人. 一.C/ ...

  5. Navicat_Preminum

    一. 安装 参考http://blog.csdn.net/longyuhome/article/details/79206041. 软件准备• [OYKSOFT.COM]navicat11.0.8_p ...

  6. Dynamics CRM 2013 初体验（2）：UI

    Dynamics CRM 2013 系统的UI与2011相比改动是巨大的:传统的导航栏被去掉了,取代它的是win8风格的小磁铁:Ribbon风格的工具栏也被去掉啦,它的风格将回滚至4.0时代:新系统添 ...

  7. 关于C++中覆盖，重载，隐藏的一点说明

    C++覆盖 重载 隐藏是三个经常容易混淆的概念 这里我们简单总结下: 1.重载的条件(编译时多态) a.同一个类中 b.函数名相同,参数不同(返回值不能作为重载的条件) c.与函数是否为虚函数无关 2 ...

  8. js相对定位

    效果图:

  9. python学习之路-5 基础进阶篇

    本篇涉及内容 双层装饰器字符串格式化 双层装饰器 装饰器基础请点我 有时候一个功能需要有2次认证的时候就需要用到双层装饰器了,下面我们来通过一个案例详细介绍一下双层装饰器: 执行顺序:自上而下 解释顺 ...

  10. Prototypes analyze（二叉排序树，不同树形个数）

    Prototypes analyze 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 ALpha Ceiling Manufacturers (ACM) is ana ...