當圖片過大時的解決方案：
1、儘量壓縮圖片大小，最好將png格式轉化爲jpg格式（注意不要像我一樣以爲改了後綴就可以轉換格式了），因爲png格式是jpg格式的十幾倍大小。
2、如果那張圖片是作爲背景圖片存在的話，可以考慮用先將其設爲none，然後加載完畢後（即onload事件觸發）再讓其顯示。但是這樣的話未免會讓網頁留白，圖片的突然出現也會有些突兀，所以可以考慮使用一個跟北京圖片一樣的顏色作爲html的背景色，這樣圖片會好點。比如餓了嗎的處理個例：
背景：最近所做的項目中，類似於餓了麼這樣的平臺，就是相對簡單一些，並且，對於每一件商品，都有一個詳情頁，必須要進入這個詳情頁，才能加載一個很大的圖片來展示圖片詳情。
問題：由於圖片比較大， 所以下載的過程會比較慢，所以出現的情況就是，剛開始只顯示一個背景層，緊接着圖片開始一點一點的加載出來，而不是完全加載出來（恩，學過計算機網絡的同學應該是知道原因的）， 這樣的用戶體驗並不是很好。
改進方案： 首先，固定圖片外層div的高度和寬度，然後img設置爲100%（寬高都是如此），背景顏色要有，這樣，即使沒有顯示出來，也是可以看得。重要，設置圖片的 onload 事件，首先要設置圖片爲display: none； 然後當圖片onload之後，我們再將之加載出來，並且加載時透明度可以是一個遞增的過程。 代碼大致如下（vue項目寫的）：
getSomething (e) {
var target = e.currentTarget;
target.style.opacity = 0;
target.style.display = ‘block’
var timer = setInterval(function () {
target.style.opacity = parseFloat(target.style.opacity) + 0.01;
if (parseFloat(target.style.opacity) >= 0.98) {
clearInterval(timer);
}
}, 30);
}
<img src=“picture” alt=“” style=“display: none;” v-on:load=“getSomething($event)” >
3、第三種方法是我的老闆給我提出的，意思是如果圖片過大，就在後臺將圖片切割成一個一個片段傳回客戶端，然後客戶端自行進行拼接。我沒有嘗試過。
4、第四種是用用一個較小的圖片先代替，等到圖片加載完畢再用真正的圖片替換掉。
以上的後三種方法都要配合第一種方法使用，效果最佳。
當加載的圖片過多時的處理情況：
1、將圖片服務和應用服務分離(從架構師的角度思考)
對於這個方案對於經驗尚淺的我來說是考慮不多的,通過跟leader溝通,瞭解到這一點,此方案是架構師在架構過程中必須要考慮到的.
對於服務器來說,圖片始終是最消耗系統資源的,如果將圖片服務和應用服務放在同一服務器的話,應用服務器很容易會因爲圖片的高I/O負載而崩潰,所以當網站存在大量的圖片讀寫操作時,建議使用圖片服務器.
(注:圖片服務器是專門爲圖片讀寫操作優化的獨立服務器,運行網站的服務器稱爲應用服務器)
另外瀏覽器在同一時間對同一域名下的資源的併發請求數目是有限制的,一般在2-6之間,超過限制數目的請求就會被阻塞.
2、圖片懶加載
像淘寶或者京東這樣的APP頁面上有很多圖片,當我們滑到下一屏時下一屏的圖片纔會加載,這就採用了圖片懶加載的方式.
圖片懶加載,簡單來說就是在頁面渲染過程中,圖片不會一次性全部加載,會在需要的時候加載,比如當滾動條滾動到某一個位置時觸發事件加載圖片,如下代碼:
通過js將img標籤的data-src屬性賦值給src屬性。
詳情請看廖雪峯的jquey處理方法：https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000
3、css sprites
當網站或者APP有大量小icon,如果上傳到圖片服務器比如CDN, 要加載所有這些小icon將增加大量請求,而CDN是按流量收費的,這無疑將增加很多成本.
CSS Sprites 技術早已不新鮮,就是將這些小icon合併成一張圖片,只需要加載一次,每次通過background-position來控制顯示icon,這樣就可以節約大量請求,節約成本.
不過這也有一定的缺點:在長期開發多人合作的項目中,會不好維護這些sprites,每次對icon做修改,都得相應的改動css裏background-position的值,相當繁瑣.
4、將圖片壓縮成base64格式來節約請求
將圖片壓縮成base64,隨html或者css一起下載到瀏覽器,不需要額外的請求,這樣就節約了請求.
我們知道圖片在傳輸過程中是流傳輸,如果將圖片轉換成base64,實際上是變大了,並且瀏覽器在decode base64編碼的圖片時需要耗費很多時間的,所以如果我們選擇此種方案的話,最好選擇一些小圖片,不然得不償失,在webpack中可以設置最大多少byte的圖片壓縮成base64
針對decode base64編碼的圖片比較慢的問題,我們可以選擇使用canvas來加速.當向canvas發出繪畫命令時,瀏覽器直接將指令發到圖形加速器而不需要開發者更多的干預,硬件圖形加速器則以難以執行的運算速度實時繪畫和渲染圖形.因此,我們可以使用canvas來渲染base64編碼後的圖片