JavaScript 预先加载图片

最近写一个鼠标划过变换图片的JavaScript特效，鼠标划过由于要有一段时间加载图片，导致鼠标放在上面时就出现了空白的现象，于是就想着一打开这个页面就加载图片，所以就写了这么一个js的图片预加载函数。支持多维数组加载，支持动态gif，不破坏原有数组结构。

callBack函数接收一个参数，即加载好的图片数组。
参数imgs可以是字符串（用","分割）或者一维数组或多维数组

 

function loadImg( imgs, callBack ){ var imgArr; if(typeof imgs == "string")imgArr = imgs.split(","); else if(imgs.constructor == Array) imgArr = imgs; else return; var i=0, n = imgArr.length, counter = 0, imgs = []; if( imgArr[0].constructor == Array ){ //多维数组 for(; i<n; i++){ loadImg( imgArr[i], function( _imgs ){ counter ++; imgs.push( _imgs ); if( counter == n ) callBack( imgs ); } ); } return; } //如果使用了框架，则可以省略一些步骤 var userAgent = navigator.userAgent.toLowerCase(); var msie = /msie/.test( userAgent ) && !/opera/.test( userAgent ); var __load = function( url ){ //load函数，每次处理一个图片 var img = new Image(); if( msie ) img.onreadystatechange = function(){ //防止动态gif多次调用onload函数 if(img.readyState == "complete"){ counter ++; imgs.push(img); if(counter == n) callBack( imgs ); } }; else img.onload = function(){ counter ++; imgs.push(img); if(counter == n) callBack( imgs ); }; img.src = url; }; for(; i<n; i++) __load( imgArr[i] ); } 使用范例： function doSomething( imgs ){ var img; for(var i=0, n=imgs.length; i<n; i++){ img = imgs[i]; alert("图片"+ img.src +"的尺寸是"+ img.width +"x"+ img.height); // 测试一下有没有加载成功 成功的话会显示图片的路径及宽高 } } loadImg( "pic001.jpg,pic002.gif,pic003.bmp", doSomething ); loadImg( ["pic001.jpg","pic002.gif","pic003.bmp"], doSomething ); //同上句等效，可选择使用  
 

或使用匿名函数：

 

loadImg( [ ["test00.jpg", "test01.jpg"], ["test10.jpg", "test11.jpg"] ], function( imgs){ alert("test10.jpg的尺寸是"+ imgs[1][0].width +"x"+ imgs[1][0].height ); } );