您的位置:首页 > Web前端 > JavaScript

html页面异步加载js文件

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

script 中加入 async=”async”

async 是html5的新属性,低版本的浏览器不兼容
1
<script type="text/javascript" async="async" src="http://thirdpart/js.js" ></script>

用js方法异步加载

这种方法是监听页面加载完之后,在页面中加入script,从而达到引入js文件
123456789101112131415161718
(function() {   function asyncLoad() {     var src = "http://thirdpart/js.js";     var urls = src.split(",");     var x = document.getElementsByTagName('body');     if(x && x[0]){       for (var i = 0; i < urls.length; i++) {         var s = document.createElement('script');         s.type = 'text/javascript';         s.async = true;         s.src = urls[i];         x[0].appendChild(s);       }     }   }   window.attachEvent ? window.attachEvent('onload', asyncLoad) :           window.addEventListener('load', asyncLoad, false); })();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: