css加载异步,js,css异步加载

有些时候为了效率,我们需要js与css能够异步加载

方法1:直接在后面加一个async的关键字

但是这样写html5后才开始支持

方法2:动态生成一个link或者script标签来实现异步加载

例如我们动态创建一个link标签来显示样式的异步加载$(function () {

//异步延迟加载样式

var 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里边去请求某个jsvar iframe = document.createElement('iframe');

document.body.appendChild(iframe);

var doc = iframe.contentWindow.document;

doc.open().write('

');

doc.close();

其实这种动态加载iframe的方式也可以实现一个iframe预加载,这样可以提高iframe加载的速度

欢迎加群讨论技术,群号:677373950

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值