关于javascript:前端必备优化大体积图片加载的几种方案

问题：有的时候，咱们会在网页上渲染大体积图片，然而图片总会线性地一点点进去，用户体验不太好

就像这样

为了解决这个问题，我整顿了几种优化计划

• 通过 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

图片会整张显示进去，但不倡议转大图片，否则你的代码会很长很长