在正常的加载过程中,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. [转] 浅谈Linux系统的启动流程

    原文:http://blog.csdn.net/justdb/article/details/9621271 版权声明:本文为博主原创文章. Linux系统的启动时通过读取不同的配置文件,执行相应的S ...

  2. EasyUi 分页 和 表格数据加载

    这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...

  3. java高薪之路__009_网络

    1. InetAddress类2. Socket: IP地址和端口号的结合,socket允许程序把网络连接当成一个流,数据在两个socket间通过IO传输, 通信的两端都要有socket. 主动发起通 ...

  4. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  5. SPSS数据分析—多元方差分析

    之前的单因素方差分析和多因素方差分析,都在针对一个因变量,而实际工作中,经常会碰到多个因变量的情况,如果单纯的将其拆分为多个单因变量的做法不妥,需要使用多元方差分析或因子分析 多元方差分析与一元方差分 ...

  6. python——协程

    由于python中的多线程比较特殊,所以协程的概念就变得尤为珍贵了,对于cpu密集型的操作,使用协程的效率无疑要好过多线程很多.因为协程的创建及其间切换的时间成本要低于线程很多.也因为这一点,很多人说 ...

  7. Windows下配置OpenGL环境

    这里编译工具为VS2012. 首先OpenGL的官网如下链接(英文) http://www.opengl.org http://www.opengl.org/resources/libraries/g ...

  8. 0505 Scrum 项目1.0

    应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 团队项目选题  一个售书网站(O2O) NABCD 模型 1) N (N ...

  9. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. javaee包含的服务和组件

    参考自 http://blog.itpub.net/29990276/viewspace-1318551/