Rumah  >  Artikel  >  hujung hadapan web  >  JS异步加载方法

JS异步加载方法

一个新手
一个新手asal
2017-09-21 10:00:141818semak imbas


defer与async

  • defer

html4为script标签定义了一个扩展属性:defer。defer指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。但是该属性并不是一个理想的跨浏览器解决方案。该属性只有IE4+和firefox3.5+的浏览器支持。用法如下:

<script type=&#39;text/javascript&#39; src=&#39;test.js&#39; defer></script>

带有defer属性的‘’script‘’标签可以放置在文档的任何位置,当一个带有defer属性js文件下载时,它不会阻塞浏览器的其他进程,因此这类文件可以与页面中的其他资源并行下载。带有defer属性的script标签在dom加载完成(onload事件触发前执行)

  • async
    html5规范引入了async属性,用于异步加载脚本。

 <script type=&#39;text/javascript&#39; src=&#39;test.js&#39; async></script>

async与defer的相同点是采用并行下载,在下载的过程中不会产生阻塞。区别在于async是加载完成后自动执行,而defer需要等待页面完成后执行。

动态创建script

主要原理:javascript可以动态创建html中几乎所有的内容,所以我们可以利用javascript动态地创建script标签并添加到html中。

var script = document.createElement("script");
  script.type = "text/javasctipt";
  script.src = "file.js";
  document.getElementByTagName("head")[0].appendChild(script)

我们可以使用如下方法跟踪并确保脚本下载完成并准备就绪:

function loadScript(url,callback){var script = document.createElement("script");
  script.type = "text/javasctipt";  //IE
  if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == &#39;loaded&#39;||script.readyState ==&#39;complete&#39;){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

调用方法:

loadScript(&#39;files.js&#39;,function(){
    alert("file is loaded")
})

XMLHttpRequest脚本注入

通过XHR对象获取脚本并注入到页面

/获取XMLHttpRequest对象,考虑兼容性。  var getXmlHttp = function(){
    var obj;    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "file3.js", true);

  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 {    if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.body.appendChild(script);
}
    }
  } 
  xmlHttp.send(null);

Atas ialah kandungan terperinci JS异步加载方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:递归调用函数方法Artikel seterusnya:使用JS实现前端缓存