在正常的加载过程中,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. css取消input、select默认样式(手机端)

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  2. (原创)IP协议Header部分的Checksum计算方法

  3. POM.xml 标签详解

    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以 ...

  4. Instuments工具

    最近一直在研究IOS在多语言环境下的自动化测试,其中一个重大的问题就是如何在自动化测试的时候能够自动切换语言, 比如某个软件支持10个国家的语言,如果不能自动的切换语言,那么在测试的过程中就需要手动切 ...

  5. PHP 小方法之 显示 今天 昨天 上周 上月 近三月 的时间

    if(!function_exists('get_date_array')){ function get_date_array(){ $_NOW = time(); $today_begin = st ...

  6. 控制反转(IOC: Inverse Of Control) & 依赖注入(DI: Independence Inject)

    举例:在每天的日常生活中,我们离不开水,电,气.在城市化之前,我们每家每户需要自己去搞定这些东西:自己挖水井取水,自己点煤油灯照明,自己上山砍柴做饭.而城市化之后,人们从这些琐事中解放了出来,城市中出 ...

  7. zabbix3.0.4 部署之三 (LNMP > Mysql 安装)

    MySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具. 因此,我们首先要在系统中源码编译安装cmake工具. 接下来的安装过程中会遇到错误,我们 ...

  8. JS 概述

    HTML+javascript+CSSjavascript 1995出现,JQuery -2006出现--React.js 阿里/美团/去哪儿 2013, Facebook发布UI框架库React,引 ...

  9. jquery.SuperSlide.2.1.2--轮播(兼容到IE7 适用于整屏)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  10. 通过 Informix 系统表监控和优化数据库

    Informix 数据库系统字典表简介 Informix 数据库服务器运行时的状态信息是数据库管理员 DBA 进行系统监控和优化的必需信息来源.Informix 的状态信息在内部以 2 种方式存在,如 ...