javaScript的預載入

在有大量圖片的頁面中，為了避免頁面載入完圖片還未載入完成，我們通常會使用js的圖片預載入。

這是一個預載入的demo：

首先把圖片放入到一個類名為imgSrcArr的變數當中：

var imgSrcArr = [

    ‘./imgs/01.png’,

    ‘./imgs/02.png’,

    ‘./imgs/03.png’,

    ‘./imgs/04.png’,

    ‘./imgs/05.png’

]

再用一個變數來儲存要遍歷的圖片：

var imgWrap = [];

用一個函數來執行這個方法：

function preloadImg(arr) {

    for(var i = 0; i < arr.length; i ++) {

        imgWrap[i] = new Image();

        imgWrap[i].src = arr[i];

    }

}

頁面載入時執行此函數：

window.onload = function() {

    preloadImg(imgSrcArr);

}

在頁面執行此函數：

$(function(){

    var imgSrcArr = [

        ‘./imgs/01.png’,

        ‘./imgs/02.png’,

        ‘./imgs/03.png’,

        ‘./imgs/04.png’,

        ‘./imgs/05.png’

    ];

    var imgWrap = [];

    function preloadImg(arr) {

        for(var i = 0; i < arr.length; i ++) {

            imgWrap[i] = new Image();

            imgWrap[i].src = arr[i];

        }

    }

    window.onload = function() {

        preloadImg(imgSrcArr);

    }

})