前端加载大图片从模糊到清晰

打开天猫随便点了个链接,加载了一张大的背景图片,该图片从非常模糊到正常显示有一个过程,深入了解一下它的实现过程。

打开控制台,禁用Cache,模拟2G网络,刷新页面

查看请求列表,浏览器先请求了一张缩略图,设置为div的背景图片,div宽高等同于整个页面,效果看起来就像页面已经显示出来一样

在缩略图之上,才是正常尺寸图片显示到地方,当图片加载完毕显示出来就遮住了模糊的缩略图,当然也可以替换掉缩略图,在用户看来,模糊的图片随着加载过程变清晰了

如果直接给缩略图之上的img元素设置src,稍微大一点的图片加载起来是这幅德行:

这样的效果,男人看了沉默女人看了流泪,显然无法满足老板的要求,解决办法是等图片完全加载好了再显示出来,具体点来说:

创建image对象,将要加载的图片URL赋值给image对象的src,监听image对象的onload事件,在事件回调函数内修改img元素的src,也可以设置图片元素的position将元素偏移非可视区直接加载,图片加载完后丢回可视区

缩略图比较难看,为了有更好的用户体验,可以给缩略图加个高斯模糊filter: blur(4px),图片加载完毕修改img src属性后,再将高斯模糊渐渐过渡到filter: blur(0),图片就清晰了

最终效果:

demo中,缩略图用base64编码表示,这是节省带宽的一种方式,如果有多个缩略图,可用一个http请求以字符串按某个分隔符的形式返回,前端解析后使用,减少了http请求,图片加载优化还有更多方式,包括用css绘制简单的样式替代图片(根据需求选择更合适的图片格式,jpg适合色彩较多的场景,gif用于较复杂的动画,png适用于半透明场景),设置合理的缓存,图片懒加载(非可视区不加载)等等

demo完整代码

<!DOCTYPE html>
<html>
<head>
    <title>大图片加载从模糊到清晰</title>
    <style type="text/css">
    .content{
     
        position: relative;
    }</
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值