xx动图加载太慢怎么办？分享几个压缩优化小技巧！

最近自己瞎折腾一个页面，上面放几张动图，想让效果生动点儿。结果一预览，好家伙，加载那叫一个慢，图片得转半天圈才出来，体验贼差。

开始动手解决

这肯定不行，得想办法优化。第一个想到的就是压缩这动图本身。现在的图那么大，肯定得先把它变小点。

我就上网找些工具，有在线的，也有要下载的。随便挑个在线的试试，把原来的 GIF 文件传上去，它那边处理一下，再下载下来。看看体积，确实小不少。想着这下总该快。

压缩后的问题

把压缩后的图换上去，再一刷新页面。加载速度确实快点，但也没快到哪儿去，而且有几张图感觉有点失真，颜色看着怪怪的，没原来那么清晰。特别是颜色比较多的动图，压缩狠就不好看。

看来光压缩还不够，或者说不能压太狠。我又琢磨，是不是动图本身的颜色太多导致的？GIF 这玩意儿支持的颜色好像有限，颜色越多可能体积就越大。

尝试减少颜色

我又去找些工具，看看能不能在压缩的时候限制一下颜色数量。试试，把颜色数量调低，比如从 256 色降到 128 色或者更低。处理完再看，体积确实能进一步减小，而且有时候对图片质量影响不大，特别是那些本身颜色就不复杂的动图。

但这个方法，对色彩丰富的图效果就不太行，颜色一少，那观感下降得厉害。所以这招也得看情况用。

换个思路：加载方式

折腾半天，体积是小些，但感觉还是不够利索。后来看到有人提到懒加载（Lazy Loading）这个办法。

意思就是，不用一打开页面就把所有图片全加载，尤其是那些在屏幕下方、用户没滚下去就看不到的图片。可以等到用户把页面往下滚，快要看到那张图的时候，再开始加载它。

我感觉这个思路挺对路的。就算动图还是有点大，但只要不是一开始就非得加载出来，用户就不会觉得卡顿。

于是我就去找实现懒加载的法子，网上有不少现成的代码片段或者库可以用。找个简单的，加到我的页面里试试。

最终效果

效果还真不错！页面打开速度明显快多，因为一开始只加载屏幕能看到的内容。往下滚动的时候，那些动图才一个接一个地显示出来，虽然加载还是需要一丢丢时间，但因为是边滚边加载，给人的感觉就流畅多，不像以前那样需要等半天。

所以我就是这么搞定的：

先把动图适当压缩一下，稍微牺牲点质量换体积，但别压太狠。

然后，对于颜色不复杂的图，可以试试减少颜色数量进一步优化。

最关键的是加上懒加载，让图片在需要显示的时候再加载。

这么一套组合拳下来，总算是把页面动图加载慢的问题给解决。用户体验上去，我自己看着也舒服多。实践下来感觉，优化这事儿，确实得根据实际情况多试试不同的方法组合着来。