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

結語

依舊是做筆記的調性，哈哈哈，以後再補充其他的。