Rumah  >  Artikel  >  hujung hadapan web  >  html页面中异步加载js文件方法

html页面中异步加载js文件方法

韦小宝
韦小宝asal
2018-03-14 18:29:341775semak imbas

一般直接引入第三方的js,如果第三方速度比较慢,会阻塞页面的渲染,用户等待的时候,会看到一片的空白,这样的用户体验不太好。因此一些不用马上运行的js,可以用异步进行加载。

加载方法有两种,如下

script 中加入 async=”async”

async 是html5的新属性,低版本的浏览器不兼容

<script type="text/javascript" async="async" src="http://thirdpart/js.js" ></script>

用js方法异步加载

这种方法是监听页面加载完之后,在页面中加入script,从而达到引入js文件

(function() {
function asyncLoad() {
var src = "http://thirdpart/js.js";
var urls = src.split(",");
var x = document.getElementsByTagName(&#39;body&#39;);
if(x && x[0]){
for (var i = 0; i < urls.length; i++) {
var s = document.createElement(&#39;script&#39;);
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = urls[i];
x[0].appendChild(s);
}
}
}
window.attachEvent ? window.attachEvent(&#39;onload&#39;, asyncLoad) :
window.addEventListener(&#39;load&#39;, asyncLoad, false);
})();

Atas ialah kandungan terperinci html页面中异步加载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