前幾天碰到網頁需要逐幀播放幾百張圖片，如何加載圖片的問題，我去讀了很多講處理方法和應用情景的文章，在這里順着我自己思考這個問題的思路整理一下。
一：了解了圖片懶加載和預加載的定義、用法和應用場景懶加載和預加載
懶加載:滯后加載，預加載:提前加載。對於這次這個內容龐大的網頁，當然是用預加載的方式處理圖片.
二：嘗試使用上文提到的ajax方法，一次異步加載50張圖片，但是受限於圖片大小和網速，通過調試器查看network一欄時，發現加載完成需要10秒以上，如果用戶進入網頁馬上點擊播放，圖片來不及加載，網頁就會空白。這屬於一個比較'硬'的問題了，在用戶網速不定的情況下，我想到將圖片更好地壓縮一下，將其他格式的圖片轉化成webp格式，轉換了一張試了一下，圖片的大小只有原來的1/7，這應該是一個有效的方法。
三：借鑒讓圖片加載這件事兒變得更美好，我想到ajax預加載圖片的方式是一張圖片一次ajax，因為每張圖片對應一個uri，一次ajax也只能獲取一個uri也是正常的。如果一次請求的數據里有多張圖片的信息就好了。這篇文章里提到了兩個合並http請求次數的方法，分別是將圖片轉化成base64格式的字符串
采用DataURL這種方式將圖片被轉換成base64編碼的字符串形式，如果單純地“嵌”入HTML中是不會被緩存的，
但是加在CSS或JS文件中，通過緩存CSS或JS則達到了間接緩存以base64編碼的圖片。
和雪碧圖。這兩種方法都類似於webp方法，直接改變圖片源的形式來加快加載速度。
四：那有沒有代碼級別的優化方案呢?還真有一個，通常用的ajax預加載一批圖片，這些ajax是異步的。而在某些情形下，使用同步的方式，在圖片之間有邏輯順序(比如超鏈接跳轉時，那個超鏈接圖片應該比跳轉后頁面的圖片先加載出來)時，將更關鍵的(critical)圖片先加載出來是更優的解決方案。但是這樣並不會縮短加載完所有圖片的耗時，所以這個方法不適用於我這次遇到的問題。這個方案來自A better way to preload images for web galleries
五:還有就是使用別人寫好的插件，這個暫時不考慮。
總結一下，圖片的懶加載和預加載一個是提高了頁面初始化速度，減輕服務器負擔，一個是提高用戶體驗，增加了頁面初始化時間，目前能查到的實現方法都比較一致，沒有太多差異。那么如何解決我遇到的這個比較硬的問題呢，想了一下，軟件層面還是挺有難度的，只能從更加底層比如http協議或者瀏覽器層面看看有沒有可以優化的地方，這樣應該針對這個問題在前端方面就已經探究完全了吧...