前端必备：优化大体积图片加载的几种方案

#前端必备：优化大体积图片加载的几种方案| 来源: 网络整理| 查看: 265

问题：有的时候，我们会在网页上渲染大体积图片，但是图片总会线性地一点点出来，用户体验不太好

就像这样

在这里插入图片描述

为了解决这个问题，我整理了几种优化方案通过link标签preload预加载图片拆分图片onload前用其他样式代替背景颜色压缩图片后转base64 1.首先看第一种preload方式复制代码

添加上后，浏览器会在渲染前先加载完图片，这样图片在显示时会整张地显示

在这里插入图片描述而且这种方式在各端支持度也还可以，然后看下第二种方式

2.图片拆分

现在大图片是5MB，我拆成了9个400多KB的小图片，现在看下效果在这里插入图片描述

可以看到，体验上稍微有了些改善，但这里我其实偷了个懒，要是拆地更细，体验会更好

3.图片onload前用其他样式代替

img在渲染完成后会触发onload事件，那么我们可以先设置图片为隐藏，放一个图片或者loading进行过渡，然后在图片触发onload事件之后，进行切换另外有些cdn也可以通过query参数获得模糊的图片，这样我们就可以实现模糊到清晰的渐进加载

4.背景颜色

给图片的包裹元素提前设置一个与这个图片整体色调相符的背景颜色在这里插入图片描述

5.转base64

在这里插入图片描述

图片会整张显示出来，但不建议转大图片，否则你的代码会很长很长

【本文地址】

今日新闻