在正常的加载过程中,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. XML与JSON的转换

    -(void)test {          //XML文本范例     NSString *testXMLString = @"Cake0.55RegularChocolateBluebe ...

  2. ie6兼容之绝对定位元素内容为空时高度问题

    正常显示: ie6下显示: line6元素高度最小16px; 解决办法: 添加内容在空的div里,并且设置行高即可. 其中,非ie6浏览器不需要再空的div里加无谓的内容,再次需要用“条件注释”来解决 ...

  3. C语言语法之运算符及优先级

    注:该内容整理自以下链接. http://blog.csdn.net/huangblog/article/details/8271791 表:C语言运算符及优先级 优先级 运算符 名称或含义 使用形式 ...

  4. .NET 4.5 WPF Ribbon

    文/嶽永鹏 Visual Studio 2012  DO.NET 4.5 Ribbon 界面编程. 代码 =============================================== ...

  5. sphinx索引文件进一步说明——最好是结合lucene一起看,直觉告诉我二者本质无异

    摘自:http://blog.csdn.net/cangyingzhijia/article/details/8592441 Sphinx使用的文件包括 "sph", " ...

  6. angular directive指令内的参数

    angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...

  7. PDF firefox转换器

  8. WCF事务应用[转]

    在B2B的项目中,一般用户注册后,就有一个属于自己的店铺,此时,我们就要插入两张表, User和Shop表. 当然,要么插入成功,要么全失败. 第一步: 首先看一下项目的结构图: 第二步: 准备工作, ...

  9. asp.net页面跳转sessionid会变

    今天发现在一个Asp.net站点中, 同一次登录, 不停刷新页面或者页面跳转, 此时后台Session的SessionID总是变化的. 创建一个页面,添加一个button,后台代码非常简单,如下   ...

  10. Top Five Hacker Tools Every CISO Should Understand

    As the role of the CISO continues to evolve within organizations towards that of an executive level ...