在正常的加载过程中,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. CPU的物理限制

    Quote from Solidot 密歇根大学的Igor Markov在上周的<自然>期刊上发表了一篇文章,谈论了CPU面临的基本物理限制.有学者曾估计预言CPU晶体管数目和性能增长的摩 ...

  2. 初识lucene

    lucene的介绍网上有好多,再写一遍可能有点多余了. 使用lucene之前,有一系列的疑问 为什么lucene就比数据库快? 倒排索引是什么,他是怎么做到的 lucene的数据结构是什么样的,cpu ...

  3. Fedora 22(15以上版本)开机自启动脚本

    前段时间做了一个网站btdog磁力与btdog电视直播.DHT爬虫需要消耗比较多的资源,原来的服务器不够用了,于是自己使用电脑搭了一台服务器,使用Fedora22系统.在Fedora22中自动写了些开 ...

  4. Java宝典(四)------Java中也存在内存泄露。

    --Java中会存在内存泄露吗? --如果你想当然的以为Java里有了垃圾回收机制就不会存在内存泄露,那你就错了. Java里也会存在内存泄露! 我们慢慢来分析. 所谓内存泄露就是指一个不再被程序使用 ...

  5. LinQ 语法基础

    LINQ (Language-Integrated Query,语言集成查询). LINQ to Objects.LINQ to SQL.LINQ to DataSet和LINQ to XML,它们分 ...

  6. BZOJ 2733 HNOI 2012 永无乡 平衡树启示式合并

    题目大意:有一些岛屿,一開始由一些无向边连接. 后来也有不断的无向边增加,每个岛屿有个一独一无二的重要度,问随意时刻的与一个岛屿联通的全部岛中重要度第k大的岛的编号是什么. 思路:首先连通性一定要用并 ...

  7. C# CheckedListBox控件的使用方法

    1. 加入项 checkedListBox1.Items.Add("蓝色"); checkedListBox1.Items.Add("红色"); checked ...

  8. 批量设置AssetBundleName

    using UnityEngine; using System.Collections; using UnityEditor; using System.IO; public class Change ...

  9. Dalvik虚拟机简要介绍和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8852432 我们知道,Android应用程序是 ...

  10. 8. 冒泡法排序和快速排序(基于openCV)

    一.前言 主要讲述冒泡法排序和快速排序的基本流程,并给出代码实现,亲测可用. 二.冒泡法排序 冒泡法排序主要是将相邻两个值比较,把小的向前冒泡,大的向后沉淀,时间复杂度为O(n2).主要思想如下: 分 ...