前端要领：优化大体积图片加载的几种解决方案

问题：有时候，我们在网页上渲染大体积图片，但是图片总是线性出来的，这样用户体验不是很好为了解决这个问题，我整理了几种优化方案，通过link标签preload预加载图片，onload前拆分图片，将背景色替换成其他样式，压缩图片，再转base641。首先看第一个preload方法后，浏览器会在渲染之前加载图片，这样图片显示的时候会整体显示，这个方法在每一端显示支持的还不错，再看第二种方法2.图片分割现在大图5MB，我把它分割成9个小的超过400KB的图像。现在可以看到效果了，体验稍微好一点。一些改进，但在这里我实际上是在偷懒。如果拆的再细一点，体验会更好。3.图片加载前，使用其他样式代替img。渲染完成后会触发onload事件，所以我们可以先设置图片隐藏。放一张图片或者loading进行transition，图片触发onload事件后再切换。另外，有些CDN还可以通过query参数获取模糊图片，这样我们就可以实现从模糊到清晰的渐进式加载。4.背景色为图片打包该元素预先设置了一个与图片整体色调相匹配的背景色。5.base64图片会整体显示，但是不建议把图片转成更大的尺寸，不然你的代码会很长