背景

当h5的首屏为一张整图的时候，图片又比较大，加载起来比较慢。
一般常用的方法是将图片无损压缩常用的压缩网站，缺点就是压缩后的图如果在网络较差的情况下，加载也会有一定的延迟，如果网络更加不稳定，会导致白屏的时间较长，影响用户体验。
第二种方式如同Medium的实现方案，首先利用一个缩略图来代替原图，提高用户体验。效果如下：

流程

页面加载------展示缩略图并设置为模糊 — 同时下载原图— 加载完原图以后替换缩略图 --关闭模糊效果

代码

const imgDiv = new Image()imgDiv.onload=()=>{const imgDiv = document.getElementsById("img")imgDiv.style.filter  = 'none'imgDiv.style.webkitFilter = 'none'imgDiv.style.backgroundImage = 'url("../img.png")'}imgDiv.src = '../img.png'  //img 为清晰图
.img{background-image: url('../css/AddImg.png');   //AddImg 为缩略图background-size:cover;filter:blur(4px);transition: filter 0.5s ease;
}

如果图片用img 标签引入原理相同

可以利用img的onload时间handleImageLoad() 知道图片是什么时候加载完成的
分为以下几步：

在原图的位置贴一张同样大小的容器
在容器内加载一张缩略图，设置模糊效果
同时请求加载原图
原图下载完成以后隐藏掉缩略图，露出原来图片，可以设置一个动画提高用户体验

// 图片加载完成function ImgLoad(){const imgDiv = document.getElementById("img-div")imgDiv.style .opacity = 0}<div id='img-div'><img src='img1'></img><img src='img2' onload="ImgLoad"></img></div>//css#img-div{position: relative;width: 200px;height: 200px;}.img1{position: absolute;filter: blur(4px);transition: opacity 0.3s ease;}

H5首屏图片加载优化相关推荐

歪门邪道之解决首屏图片加载闪烁问题
前情描述: 最近接到一个首页图片加载优化的任务,图片是展示在首页RecyclerView中.问题现象是即使有缓存,图片的展示还是会肉眼可见的跳变,没法做到一打开首页,图片就展示在那. 问题定位: Re ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
前端图片加载优化的各种技巧
目前的前端图片加载优化技术有很多,像懒加载/预加载,img上的srcset属性以及picture标签,新的图片编码格式以及Client Hints等. Client Hints 顾名思义,client ...
前端页面图片加载优化
前端页面图片加载优化问题:前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长,导致用户体验下降我总结的优化思路与方法有以下几种一.将图标换成icon字体管理如果项目存在大量的图表用的 ...
图片加载优化，拒绝OOM
2019独角兽企业重金招聘Python工程师标准>>> 最近做了个资讯类的app项目,涉及到大量的图片加载,因公司项目框架已经集成了Glide用于加载图片,理所当然就直接用了Glid ...
Android图片加载优化方案
1. 前言在电商APP中,图片在整个页面中占比最大,清晰高质量的图片能够明显提升转化率.但是APP运行环境错综复杂,往往我们会遇到图片压缩导致模糊.列表加载长时间显示空白图.查看大图黑屏过久.甚至 ...
网页图片加载优化方法总结
目录 1.压缩 2.直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉 3.使用base64编码代替图片 4.更好的图片格式 5.合并图片sprite(雪碧图) 6.使用css.sv ...
Android图片加载优化
一.高效加载大图片我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大 ...
Swift - 表格图片加载优化（拖动表格时不加载，停止时只加载当前页图片）
列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...

H5首屏图片加载优化

背景

流程

代码

如果图片用img 标签引入原理相同

H5首屏图片加载优化相关推荐

最新文章

热门文章

H5首屏图片加载优化

背景

流程

代码

如果 图片用img 标签引入 原理相同

H5首屏图片加载优化相关推荐

最新文章

热门文章

如果图片用img 标签引入原理相同