论网速快慢的区别

论网速快慢的区别

随着网络的普及,用户对响应速度快慢越来越重视了,网站越快,用户的黏性和转化率也会越高。
简单来说,就是要提高速度!影响网站速度的因素有很多,比如......................

一本正经可不是我的风格,下面请看我的表演
想法起源

一开始的想法是使用纯css进行实现,把底图base64编码后直接放在background-image上,就可以达到背景图片于网页一同加载出来的效果

第一步:
首先将提前准备好的素材图片进行处理,拔下泳衣和泳裙 

第二步:
新建个HTML文件

第三步:
<div class="裸体">
    	<div class="泳衣" id="泳衣"></div>
    	<div class="泳裙" id="泳裙"></div>
</div>
完成。。
然后就发现个问题,由于我的底图文件大小达到了12兆,编码后的字符串过大,导致网页加载又卡又慢,实在无用户体验
而且这种方式加载的底图会突然的显示出来,过于唐突,效果不好

后改用:
css+JavaScript进行实现,由background-image直接加载背景图片,能达到逐渐显示的效果,待底图加载完毕后再由js动态插入配图
window.onload = function(){
    var img=new Image();
    img.src='裸体.jpg';
    if(img.width==0){
        alert('图片加载失败')
    }else{
        document.getElementById("泳衣").style.backgroundImage="url(泳衣.png)";
        document.getElementById("泳裙").style.backgroundImage="url(泳裙.png)";
    }
}
不禁感慨一句,什么破网络,慢的连人物图片的衣服都加载不出来
本博客所有文章如无特别注明均为原创。作者:阿珏复制或转载请以超链接形式注明转自 阿珏博客
原文地址《论网速快慢的区别

相关推荐

发表评论

路人甲 OωO表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(5)

上官秀儿是你吗是你吗是你吗
自考院校 约3小时前 回复
bksn秀儿
Rainshaw 5天前 回复
不愧是你
御神装-勿忘 1周前 (2020-11-18) 回复
@御神装-勿忘:谢谢夸奖
阿珏 1周前 (2020-11-18) 回复
干货很多啊博主,感谢分享!
深圳自考办 2周前 (2020-11-11) 回复