性能优化-超大图加载

超大图加载优化

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

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

先看完成后的效果：缩略图几乎

![在这里插入图片描述](https://img-blog.csdnimg.cn/a12ec691edb8492cade4ea7f6fdabd32.png

这里很清楚的看到大图在逐渐加载

这种方式适合页面顶部有超大图的情况，如果页面内容区和下面图比较多可以使用图片懒加载