h5移动端开发中使用GIF遇到的一些个小问题

GIF概念和特点：

1. 图像交换格式（Graphics Interchange Format），其本质也就是一个文件数据。
2. 基于LZW算法的连续色调的无损压缩格式，压缩率一般在50%左右。
3. 无损压缩即指原文件的每一个数据在解压缩后仍然还在，所有的信息都可完全恢复。
4. 可以存多幅彩色图像，逐帧展示出来就是我们常见的GIF动图了。
5. 单次逐帧播放和无限循环播放

问题场景：

1. 首次进入页面GIF图单次播放完成后，退回来之后，动效不在播放（无限循环的GIF图当然不存在这个问题了）
   1.1. 原因：浏览器缓存机制，加载过后会直接调用缓存，不在重新请求
   1.2. 解决：在图片URL赋值时加上随机数串，这样浏览器以为是新图片便会再次请求

let newUrl = imgUrl + '?' + Math.random();

2. GIF图压缩问题
   2.1. gif的无损压缩算法可以让其转化成如MP4，WEBM的视频格式，这样文件更小
   2.2. 一些可以有损压缩的做法，质量会略有下降，有很多有损压缩的工具，常用的有gifsicle

结语

依旧是做笔记的调性，哈哈哈，以后再补充其他的。