前端大圖預加載代碼段

       上個周末頂了客服兩天，發現我們的用戶大多數對我們的網頁上手比較慢，10個過來咨詢的7個得問這個網頁怎么使用，我回答的次數多了，也有感觸的確應該做個導航給用戶了。其實這個導航想法之前就有了，但是下定決心要做出來還是因為此次頂了客服兩天所致的。做了整整三天，終於做出點模樣了，現在就寫一點自己的總結。

       在寫代碼之前，我還真想對自己說說一些個人感悟，100行的js代碼，我愣是在中間繞了很多彎子，思路不清晰，頭腦不靈活，JS的運用上面還是欠缺很多。在開發過程中，軍軍給了一點樣式上的建議，其實很簡單，就是一個虛框的效果，看上去更像導航一些，他也在谷歌調試器上給出了大體的樣式，讓我去兼容IE。結果，弄來弄去，我愣是沒做出，還表示要放棄，軍軍讓我找方法繼續下去。很感謝軍軍的堅持，我最終花了一點時間做出這個效果來。堅持，遇到困難的時候，堅持下去，這一點是技能提升的重點。好了，以上是小小的兩點感悟，接下來才是關於代碼方面的總結。

      這次導航比較簡單，主要是制作了14張大圖片（200-500k），根據不同的大按鈕，把對應的圖片一張一張顯示出來，點擊圖片可以切換到下一張，也可以點擊上一步，切換到上一張。一開始，我的播放圖片的方案是，需要一張加載一張，這樣的播放的問題是往往切換到下一張的時候需要等1-5秒，不知情的還以為圖片卡住了，體驗很差。於是，另外一個方案出來了：把14個URL放在一個數組里面，在需要開始導航的時候，展示一個加載14張圖片的進度條，進度條結束了，圖片也結束了，以后使用圖片都是瞬間的事情了，簡化的代碼如下：

var navImgUrls = ['a.png','b.png','c.png'];
    function preLoadImage(index,l.imgLength){
            console.log('預加載圖片代碼啟動');
            var img  =  new Image();//生成一個img對象
            img.src = navImgUrls[index];//img對象的src屬性指向當前被循環到的url
            img.onload = function(){//監聽img的onload函數
                navImgObjects[index] = img;//img加載結束以后把這個img對象替代這個url字符型，這樣你就不用再另起一個數組存放這個img對象了
                console.log('第'+index+'個img被預加載');
                $('#progress').css({width:(l=l+30)+'px'});//進度條事件
                index++;//index加1，表示要開始加載下一張圖片
                if(index < imgLength){//如果沒有超過數組長度的話，繼續加載下一張圖片
                    preLoadImage(index,l);
                }
            }
    }

navImgUrls 是一個存放每張圖片URL的數組，當然啦，如果每張圖片都不大的話這樣做的優勢不是很大，你像我這次需要展示的14張圖片都是200-500k的，很需要這樣的預加載代碼。這段代碼並不一定適合你，這只是一個總體思路，看你靈活運用了。這段代碼，如果你放在調試器看你會發現，圖片老老實實的按照隊列預加載下來，但是一開始並不是這樣的，一開始我直接在一個循環里面加載img,導致的后果是：圖片不安裝順序加載，甚至有時候圖片沒有加載過來，在數組上對應的位置為空。所以監聽onload事件，嚴格按照一個完成再繼續下一個的思路，我們就能一個一個嚴格按照隊列下過來。
      好了，這段大圖預加載代碼到此結束！