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); })(); |
相关文章推荐
- html页面异步加载js文件
- 如何调试异步加载页面里包含的js文件
- 在html页面动态加载js文件
- html加载js文件超时,跳转到错误页面
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
- html、css、js文件加载顺序及执行情况_0
- Android Webview 加载外部html时选择加载本地的js,css等资源文件
- YII 如何在当前页面外部加载css,img,js文件
- 两种方法实现在HTML页面加载完毕后运行某个js
- html、css、js文件加载顺序及执行情况
- 异步动态加载js与css文件的js代码
- ASP.NET MVC用Bundles压缩js文件,并让浏览器异步加载js
- 如何调试异步加载的js文件
- html,css,js防止浏览器缓存,导致不加载新页面。
- MVC设计模式 (1)、html页面事件触发ajax()方法调用ajax.js发送请求至请求目标文件
- js处理html页面加载之后的事件
- yepnope.js – 异步加载资源文件
- 静态HTML页面不缓存js文件的方法