性能优化-超大图加载

超大图加载优化

网站首页的头部有时候要加载超大图,可能超过4M,如果网速不好用户会看到好长时间的白屏,体验非常不好。
这里使用大图+缩略图的模式处理这个问题:

  1. 使用工具根据大图(>1M)做一个10k的缩略图
  2. 图片同时加载,大图使用定位覆盖在缩略图上
  3. 缩略图几乎100毫秒左右加载完,大图一点一点从上到下满满加载

先看完成后的效果:缩略图几乎
性能优化-超大图加载_第1张图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/a12ec691edb8492cade4ea7f6fdabd32.png

这里很清楚的看到大图在逐渐加载
性能优化-超大图加载_第2张图片
这种方式适合页面顶部有超大图的情况,如果页面内容区和下面图比较多可以使用图片懒加载

性能优化-超大图加载_第3张图片

你可能感兴趣的:(web前端,js,性能优化)