在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证这个文件加载完成后,再执行下面的内容。

  如何判断js是否加载完成?(实现loadScript(url,callback)异步加载脚本,完成后执行回调函数,要求支持IE)

我们使用document的readyState属性:document.readyState

  readyState 属性返回当前文档的状态。

  该属性返回以下值:

  • uninitialized - 还未开始载入
  • loading - 载入中
  • interactive - 已加载,文档与用户可以开始交互
  • complete - 载入完成  (loaded)

原生JS:

function loadScript(url,callback){
  var script=document.createElement('script');
    script.type='text/javascript';
    script.async='async';
    script.src=url;
    document.body.appendChild(script);
    if(script.readyState){ //IE
      script.onreadystatechange=function(){
        if(script.readyState=='complete'||script.readyState=='loaded'){
          script.onreadystatechange=null;
          callback();
        }
      }
    }else{ //非IE
      script.onload=function(){callback();}
    }
}

Jquery:使用 $.holdReady(true);  $.getScript();   $.holdReady(false)   3个函数实现

$.holdReady(true);    //hold住,等待a.js加载,后续代码不能执行
$.getScript('a.js',function(){
  $.holdReady(false); //释放,a.js加载完成,继续执行后续代码
});

$.holdReady()函数表示 延迟加载。

判断JS是否加载完成的更多相关文章

  1. 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  2. 如何判断js是否加载完全

    var script=document.createElement('script'); if(script.onreadystatechange){ script.onreadystatechang ...

  3. js判断网页是否加载完毕 包括图片

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

  4. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

  5. 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

  6. 用JS实现判断iframe是否加载完成

    本文出至:新太潮流网络博客 var iframe = document.createElement("iframe"); iframe.src = "blog.iinu. ...

  7. js 判断iframe是否加载完毕

      js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...

  8. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  9. js下判断 iframe 是否加载完成的完美方法

    一般来说,我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成.     采用的方法很类似: var iframe = document.createElement( ...

随机推荐

  1. 《第一本docker书》第4章 使用docker镜像和仓库 读书笔记

    docker最底端是一个引导文件系统,即bootfs. 第二层是root文件系统rootfs,位于引导文件系统之上. 在传统的Linux引导过程中,root文件系统会最先以只读的方式加载,当引导结束并 ...

  2. 响应式设计,bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

  3. JavaScript基础知识汇总

    1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...

  4. Maven 工程错误Failure to transfer org.codehaus.plexus:plexus-io:pom:1.0,Failure to transfer org.codehaus.plexus:plexus-archiver:jar:2.0.1

    原本好好的Maven工程却出现了莫名的错误 Failure to transfer org.codehaus.plexus:plexus-archiver:jar:2.0.1 from http:// ...

  5. js 监听窗口变化

    window.onresize = function () {.....}jquery $(window).resize(function)

  6. git: windows git ssh keys生成

    http://blog.csdn.net/lsyz0021/article/details/52064829 当我们使用github或者bitbucket等仓库时我们有可能需要ssh认证,所以需要生成 ...

  7. DOS批处理不支持将UNC 路径作为当前目录的巧妙解决方案

    DOS批处理不支持将UNC 路径作为当前目录的巧妙解决方案在有些时候,需要在批处理中操作UNC目录,但批处理并不能直接对UNC目录进行操作,怎么办? 废话少说,直接上代码,打开网上邻居→整个网络→Mi ...

  8. Modify textures at runtime

    动态修改Texture Modify textures at runtime?http://answers.unity3d.com/questions/7906/modify-textures-at- ...

  9. 递归算法(三)——不借助四则运算实现加法

    问题 求两个整型变量的和,不能使用四则运算,但可以使用位运算. 思路 以二进制形式,考虑两个整数相加: a = 01101001b b = 11100111b s =  ???????? 一个常见的结 ...

  10. Sprint.Net 笔记

    有生以来写的第一份博客, 还真不会写, 请高手们指导指导. 1.引入 Spring.Core.dll 和 Common.Logging.dll 两个文 2. 在UI层的Web.conf 的 <C ...