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);

}

})