javascript圖片載入---載入大圖的一個解決方案

javascript圖片載入---載入大圖的一個解決方案

網頁在載入一張大圖片時，往往要載入很久；

而且，在載入過程中，無法很好地控製圖片的樣式，容易造成錯位等顯示錯誤；

如果能夠在載入大圖時，先使用一張較小的loading圖片佔位，然後後台載入大圖片，當大圖片載入完成後，自動替換佔位圖，

這樣能提供更好的使用者體驗；

由於，我在開發一個圖片查看器時，遇到這樣的需求，所以我寫了個angular服務，來解決這個問題，效果還不錯；

雖然是angular服務，當是把裡面核心代碼抽出來也可以單獨使用；

來分享下原始碼：

一：

    var imgloader = new Object();        imgloader.placeholder = new Image();

imgloader是主要的對象

placeholder 用於儲存佔位圖片

二：

        imgloader.init = function(placeholderPath,width,height){            imgloader.placeholder.src = placeholderPath;            imgloader.placeholder.width = width;            imgloader.placeholder.height = height;        }

init是imgloader的初始化方法，主要指定了佔位圖片的檔案，已經它的寬高；

設定寬高的目的是為了在佔位圖還未載入完成時也能進行布局

三：

imgloader.load = function(imgElem,imgSrc,callback){        //清除之前的onload函數        if(imgElem.lastload){            imgElem.lastload.onload = function(){};        }        loadok = false;        var testImg = new Image();            testImg.src = imgSrc;        if(testImg.complete == true){           imgElem.src = testImg.src;           imgElem.width = testImg.naturalWidth;           if(imgElem.hasAttribute("height")){               imgElem.removeAttribute("height");           }        }else{           imgElem.src = imgloader.placeholder.src;           imgElem.width = imgloader.placeholder.width;           imgElem.height = imgloader.placeholder.height;           //唯讀屬性//               imgElem.naturalWidth = imgElem.width;//               imgElem.naturalHeight = imgElem.height;//               console.log(imgElem.naturalWidth+"|"+imgElem.naturalHeight);           //綁定onload函數           testImg.onload = function(){               imgElem.src = testImg.src;               imgElem.width = testImg.naturalWidth;               if(imgElem.hasAttribute("height")){                   imgElem.removeAttribute("height");               }                if(callback){                    callback();                }           };                       imgElem.lastload = testImg;//           imgloader.loadingArray.push(imgElem);        }    };

1.一開始，如果對同一個圖片元素設定了多個load，則只有最後一個生效，之前的都會被替換；

2.使用大圖的src設定一個img做測試，如果這張圖片已經載入過了，那就直接設定上這張大圖；

3.注意這裡我還原了被設定元素的寬高，為的是避免被設定元素的寬高收到預留位置寬高的影響；

4.小技巧：設定完width後，把height屬性移除的話，height會自適應width

5.如果testImg（大圖）未載入完成，則先用佔位圖代替，注意被設定圖片的寬高被修改成與佔位圖相同的大小；

6.為testImg（大圖）綁定onload函數，當大圖載入完成後，被設定元素的src替換成大圖的src，並恢複大圖的框高；

7.有設定回調的，可以在回調中再做些事情；

8.設定這個imgElem已經綁定一個大圖（再次綁定的話，這個會被消去）

9.小技巧：naturalWidth與naturalHeight是唯讀屬性

四：

一個例子：

<script src="mikuImgLoader3.0.js"></script><script> imgloader.init("dokidoki.gif",200,200); imgloader.load(img1,"001.jpg"); imgloader.load(img2,"002.jpg"); </script>

例子中可以看出：還可以用css控制被設定圖片的大小

五：

完整代碼：

 

//miku圖片載入器3.0var imgloader = new Object();    imgloader.placeholder = new Image();//    imgloader.loadingArray = new Array();    imgloader.init = function(placeholderPath,width,height){        imgloader.placeholder.src = placeholderPath;        imgloader.placeholder.width = width;        imgloader.placeholder.height = height;    };    imgloader.load = function(imgElem,imgSrc,callback){        //清除之前的onload函數        if(imgElem.lastload){            imgElem.lastload.onload = function(){};        }        var testImg = new Image();            testImg.src = imgSrc;        if(testImg.complete == true){           imgElem.src = testImg.src;           imgElem.width = testImg.naturalWidth;           if(imgElem.hasAttribute("height")){               imgElem.removeAttribute("height");           }        }else{           imgElem.src = imgloader.placeholder.src;           imgElem.width = imgloader.placeholder.width;           imgElem.height = imgloader.placeholder.height;           //唯讀屬性//               imgElem.naturalWidth = imgElem.width;//               imgElem.naturalHeight = imgElem.height;//               console.log(imgElem.naturalWidth+"|"+imgElem.naturalHeight);           //綁定onload函數           testImg.onload = function(){               imgElem.src = testImg.src;               imgElem.width = testImg.naturalWidth;               if(imgElem.hasAttribute("height")){                   imgElem.removeAttribute("height");               }                if(callback){                    callback();                }           };                       imgElem.lastload = testImg;//           imgloader.loadingArray.push(imgElem);        }    };//    //清除載入隊列的所有onload函數//    function clearOnload(loadingArray){//        for(var i=0;i