问题：有的时候，咱们会在网页上渲染大体积图片，然而图片总会线性地一点点进去，用户体验不太好
就像这样
为了解决这个问题，我整顿了几种优化计划
- 通过link标签preload预加载
- 图片拆分
- 图片onload前用其余款式代替
- 背景色彩
- 压缩图片后转base64
1.首先看第一种preload形式
<link rel="preload" href="./img/all.jpg" as="image" />增加上后，浏览器会在渲染前先加载完图片，这样图片在显示时会整张地显示
而且这种形式在各端反对度也还能够，而后看下第二种形式
2.图片拆分
当初大图片是5MB，我拆成了9个400多KB的小图片，当初看下成果
能够看到，体验上略微有了些改善，但这里我其实偷了个懒，要是拆地更细，体验会更好
3.图片onload前用其余款式代替
img在渲染实现后会触发onload事件，那么咱们能够先设置图片为暗藏，放一个图片或者loading进行过渡，而后在图片触发onload事件之后，进行切换
另外有些cdn也能够通过query参数取得含糊的图片，这样咱们就能够实现含糊到清晰的渐进加载
4.背景色彩
给图片的包裹元素提前设置一个与这个图片整体色调相符的背景色彩
5.转base64
图片会整张显示进去，但不倡议转大图片，否则你的代码会很长很长