圖片預加載 - xiaohuochai－IT工程師數位筆記本

文章出處

定義

　　預加載圖片是提升用戶體驗的一個好辦法，提前加載用戶所需的圖片，保證圖片快速、無縫發布，使用戶在瀏覽器網站時獲得更好用戶體驗。常用于圖片畫廊等應用中。
　　[注意]若使用即時加載，加載的圖片與頁面的其他內容一起加載會增加頁面的整體加載時間，所以使用window.onload比較合適。

兩種思路

【使用背景圖像】
　　使用頁面無用元素的背景圖片預加載

<style>
body{
    margin: 0;
}
img{
    width: 100px;
    height: 100px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list li{
    height: 0;
    width: 0;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="img/test.png" alt="測試">
<ul class="list">
    <li id="preload1"></li>
    <li id="preload2"></li>
    <li id="preload3"></li>
    <li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = array[iNow];
}
function preLoadImg(){
    preload1.style.background = "url('img/img1.gif')";
    preload2.style.background = "url('img/img2.gif')";
    preload3.style.background = "url('img/img3.gif')";
    preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
    preLoadImg();    
}
</script>
</body>

【使用Image()】
　　通過new Image()或document.createElement('img')創建<img>標簽，然后通過<img>src賦值語句來加載圖片

<style>
body{
    margin: 0;
}
img{
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="img/test.png" alt="測試">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
    for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
        aImages[i] = new Image();
        aImages[i].src = preLoadImg.arguments[0][i];
    }
}
window.onload = function(){
    preLoadImg(array);    
}
</script>
</body>

onload事件

　　利用圖像的onload事件可以確切地知道圖片是否被真正加載，并可能在后續執行一系列對圖片的操作功能，如獲取當前圖片的實際寬高及索引等
　　[注意1]圖片的src賦值語句必須放在圖片的onload事件后面。否則可能出現圖片已經加載完畢、但事件綁定尚未完成的情況

<button>載入圖片</button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
    preLoadImg('img/test.png');
}
function preLoadImg(url){
    var oImg = document.createElement('img');
    //在本機環境下，IE8-瀏覽器下oImg的onload事件放在src后面將無法載入圖片
    oImg.src = url;
    oImg.onload = function(){
        document.body.appendChild(oImg);
        oImg.onload = null;
        oImg = null;
    }            
}
</script>

　　[注意2]Image對象的onload屬性引用了一個匿名函數對象，而匿名函數通過其作用域引用Image對象，這種循環引用會有IE6中導致內存泄漏，因此，應該解除循環引用。

【遞歸寫法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="img/test.png" alt="測試">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = array[iNow];
}
var oImg = document.createElement('img');
var iDown = 0;    
preLoadImg();
function preLoadImg(){
    oImg.onload = function(){
        iDown++;
        alert('第' + iDown + '張圖片的寬:' + this.width + ' 高:' + this.height);
        if(iDown < array.length){
            preLoadImg();
        }else{
            oImg.onload = null;
            oImg = null;
        }
    }
    oImg.src = array[iDown];                        
}
</script>
</body>
</html>

【考慮onerror的更完善寫法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="img/test.png" alt="測試">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
    function loadImgTest(arr){
        iDown++;
        if(iDown < arr.length){
            preLoadImg(arr);
        }else{
            alert('ok');
            oImg.onload = null;
            oImg = null;            
        }
    }
    oImage.onload = function(){
        loadImgTest(arr);
    };
    oImage.onerror = function(){
        loadImgTest(arr);
    };    
    oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
</body>
</html>

【循環寫法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="img/test.png" alt="測試">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = array[iNow];
}
function preLoadImg(arr,callback){
    var aImages = [];
    var iDown = 0;
    for(var i = 0; i < arr.length; i++){
        aImages[i] = new Image();
        aImages[i].onload = function(){
            loadImgTest(arr,callback);
        };
        aImages[i].onerror = function(){
            loadImgTest(arr,callback);
        };        
        aImages[i].src = arr[iDown];
    }
    function loadImgTest(arr,callback){
        iDown++;
        if(iDown == arr.length){
            alert('ok');
            callback && callback.call(aImages);        
        }
    }    
}
preLoadImg(array,function(){
    console.log(this[0].width);
});
</script>
</body>
</html>

應用

【預加載模糊變清晰】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    width: 500px;
    height: 500px;
}
</style>
</head>
<body>
<button>載入圖片</button>
<img src="#" alt="測試">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var arrayB = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
var arrayL = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var iNow = -1;
oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = arrayL[iNow];
    aftLoadImg(arrayB,oImg0);
}

var aImages = [];
window.onload = function(){
    preLoadImg(arrayL);    
}
function preLoadImg(arr){
    for(var i = 0, len = arr.length; i < len; i++){
        aImages[i] = new Image();
        aImages[i].src = arr[i];
    }
}
function aftLoadImg(arr,obj){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = arr[iNow];
    }
    oImg.src = arr[iNow];
}
</script>
</body>
</html>