js,css异步加载
电脑版发表于：2019/3/31 15:53
有些时候为了效率，我们需要js与css能够异步加载
方法1：直接在后面加一个async的关键字
<script src="~/lib/jquery/dist/jquery.js" async></script>
但是这样写html5后才开始支持
方法2：动态生成一个link或者script标签来实现异步加载
例如我们动态创建一个link标签来显示样式的异步加载
$(function () {
//异步延迟加载样式
var link = $('<link />');
link.attr('href', '/Content/font1.css');
link.attr('rel', 'stylesheet');
link.appendTo($('head'));
link.load(function () {
console.info('加载成功...');
});
});动态加载Js
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.xx.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();也可以动态创建一个iframe,iframe里边去请求某个js
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();其实这种动态加载iframe的方式也可以实现一个iframe预加载，这样可以提高iframe加载的速度
