在有大量圖片的頁面中，為了避免頁面加載完圖片還未加載完成，我們通常會使用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);
}
})