我覺得我在這個項目里遇到了太多的第一次。比如上一篇博文：在在360、UC等瀏覽器，img不加載原因。
當前情況是：圖片加載緩慢，圖片加載時出現卡頓。
上圖：我縮放了圖片，估計有點變形。能說明情況就行，粗糙點就粗糙點吧。
1.單張圖片加載情況：
加載完：
2.banner圖加載情況
情況說明
banner有3張圖，加載的時候就分了三層。發現這個情況的時候，我表示自己很萌萌噠。
尋找原因及解決辦法
1.圖片css樣式和輪播圖js影響了圖片的加載
初始情況下，我猜測是我的css樣式沒有寫好，可能js輪播也有問題。但是我在本地服務器上訪問的時候，一切很正常。於是我排除了寫的js的問題。着重於檢查css。
我使用圖片本身屬性‘width’、‘height’來寫圖片的寬高，並將規定圖片寬高的css樣式注釋掉。清除瀏覽器緩存並刷新網頁，圖片加載卡頓的現象並沒有改善。
目前，暫時排除掉這個原因。
原諒此時的我大寫的懵逼臉
2.前端頁面卡頓？或者DOM操作惹的禍，需優化代碼。
這是我百度到的一篇文章。文章地址：http://developer.51cto.com/art/201504/473422.htm
由於有些圖片比較大，我用js控制圖片根據框的大小等比例縮放顯示在框內。當然這個功能與banner無關，但是我還是擔心是我js的影響。
於是我注釋了這個js並清除掉瀏覽器緩存后，刷新頁面，加載還是一樣的慢，可見不是我這個js的鍋。
3.圖片過大，導致加載時間過長，以致出現圖片加載出現卡頓的現象。
以上兩個方法都沒有找到問題的原因所在。我仔細看了頁面圖片的加載情況，請求數量不算多，但是每張圖片請求成功加載出來花費的時間很長，有的甚至需要2、3s多。
我再去查看了淘寶、京東的圖片加載情況，很快，都是毫秒，就沒有上秒的。
我將淘寶的圖片從banner到商品圖，各下載幾張，發現圖片大小最大的也就只有幾百K。
再看看我方官網上的圖片，都是幾M的，甚至有幾十M的。
據此，我猜測是因為圖片過大，導致加載時間過長，以致出現圖片加載出現卡頓的現象。
由於圖片已經上傳到服務器，幾千張圖片，不可能讓櫃台工作人員重新上傳。所以我從服務器上將圖片下載到本地，進行手動壓縮=-=
將幾M甚至幾十M的圖片壓縮到幾百K后，我表示人生已經圓滿了。將圖片重新更新到服務器的時候，我想這下應該解決問題了吧！！
但也只是我想想，問題並沒有被解決，頁面在加載時，圖片仍然卡頓！！
迎面一盆冰水澆過來的感覺，我已經不造說什么好。
4.采用圖片預加載或圖片分屏加載
采用以上兩種方式，頁面加載圖片仍卡頓！！！
以上兩種方式會單獨說怎么操作。
5.本地緩存
仍然無用
6.UI保存圖片方式錯誤。應該采用漸進式的JPEG
我和后端童鞋一起，從各自的方向掙扎了n天，嘗試了n種方法，都沒能解決這種情況。
於是各自求助經驗比較豐富的人。
有個大神告訴我們，可能是UI保存圖片的問題。大神從官網下載一張圖片，處理過后發給我們，放上去后，問題完美解決！！撒花~~~
UI在保存圖片的時候，要保存成漸進式的JPEG。
標准型jpg圖片顯示效果：
漸進式jpg顯示效果：
以上兩圖來自文章：PhotoShop制作漸進式JPEG的方法。 鏈接：http://www.jb51.net/photoshop/182198.html