预加载图片
第一种：
<script>
function preload(path, img, callback)
{
for (var i=0; i<img.length; i++)
{
var src = path + img[i]
img[i] = document.createElement("img")
img[i].style.display = "none"
img[i].onload = function()
{
document.body.removeChild(this)
this.onload = null
this.style.display = ""
if (!--i) callback(img)
}
img[i].src = src
document.body.appendChild(img[i])
}
}
onload = function()
{
preload
(
"http://bbs.51js.com/images/smilies/",[
"sweat.gif",
"loveliness.gif",
"call.gif",
"funk.gif"],
function (img)
{
alert('ok')
for (var i=0; i<img.length; i++)
{
document.body.appendChild(img[i])
}
}
)
}
</script>
第二种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function LoadImage(arrSrc,callBack)
{
this.Length=arrSrc.length;
this.LoadedLen=0; //已经被加载的图片个数
var self=this;
if(self.Length<1)
{
callBack(arrSrc);
return;
}
//经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来...
if(Opera)
{
for(var i=0;i<self.Length;i++)
{
var tmpImg=new Image();
tmpImg.src=arrSrc[i];
tmpImg.onload=function()
{
self.LoadedLen++;
if(self.LoadedLen==self.Length && callBack) callBack(arrSrc);
}
}
return;
}
this.Load=function()
{
self.LoadedLen++;
document.getElementById("counter").innerHTML=self.LoadedLen;
if(self.LoadedLen<self.Length) self.DownImg();
else if(callBack) callBack(arrSrc);
}
this.DownImg=function()
{
var tmpImg=new Image();
tmpImg.src=arrSrc[self.LoadedLen];
if(IE)
{
if(tmpImg.readyState=="complete") self.Load();
else tmpImg.onreadystatechange=function()
{
if(this.readyState=="complete") self.Load();
}
}
else tmpImg.onload=self.Load;
}
this.DownImg();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="counter"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arr=['http://www.baidu.com/img/logo.gif','http://www.baidu.com/img/logo.gif','http://www.baidu.com/img/logo.gif'];
var t=new LoadImage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerHTML+=str;
});
//-->
</SCRIPT>
</BODY>
</HTML>
第三种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片批量加载</title>
</head>
<body>
<div id="status" ></div>
<div id="processing"></div>
<script type="text/javascript">
function $id(id){ return document.getElementById(id);}
function $c(tagName){ return document.createElement(tagName);}
window.onload = function(){
imageLoad( {
url:function(v){
v = [];
for(var i=1; i<=100; i++){
v[v.length] = 'http://www.landgame.com.cn/images/game/slg_pic/GifBorder_'+i+'.gif?_='+(new Date).getTime();
}
return v;
},
oncomplete: function(s){
$id('status').innerHTML = '正在加载...'+s.complete+'/'+s.total;
$id('processing').innerHTML = this.src;
},
complete:function(imgs, s){
var $r = $c('div');
$r.id = 'result';
$r.innerHTML = '计划加载:'+s.total+', 加载成功:'+s.load+'错误:'+s.error;
document.body.appendChild($r);
for(var i=0, l=imgs.length, $m; i<l; i++){
$m = $c('div');
$m.innerHTML = (imgs[i].loaded?'加载成功:':'加载失败:')+ imgs[i].src;
document.body.appendChild($m);
}
}
});
};
//------------------------------------------------------------------------------------------------------------
function imageLoad( s ){
var urlset = [], undefined, toString = Object.prototype.toString;
switch( toString.apply(s.url) ){
case '[object String]': urlset[urlset.length] = s.url; break;
case '[object Array]': if(!s.url.length){ return false; } urlset = s.url; break;
case '[object Function]': s.url = s.url(); return imageLoad( s );
default: return false;
}
var imgset =[], r ={ total:urlset.length, load:0, error:0, abort:0, complete:0, currentIndex:0 }, timer,
_defaults = {
url:'',
onload: 'function',
onerror: 'function',
oncomplete: 'function',
ready: 'function',
complete: 'function',
timeout: 15
};
for( var v in _defaults){
s[v] = s[v]===undefined? _defaults[v]: s[v];
}
s.timeout = parseInt( s.timeout ) || _defaults.timeout;
timer = setTimeout( _callback, s.timeout*1000);
// 生成 image 对象数组
for( var i=0,l=urlset.length,img; i<l; i++){
img = new Image();
img.loaded = false;
imgset[imgset.length] = img;
}
// onload & onerror 绑定
for( i=0,l=imgset.length; i<l; i++){
imgset[i].onload = function(){ _imageHandle.call(this, 'load', i ); };
imgset[i].onerror = function(){ _imageHandle.call(this, 'error', i ); };
imgset[i].onabort = function(){ _imageHandle.call(this, 'abort', i ); };
imgset[i].src = ''+urlset[i];
}
// ready 事件回调
if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); }
// onload & onerror 句柄
function _imageHandle( handle, index ){
r.currentIndex = index;
switch( handle ){
case 'load':
this.onload = null; this.loaded = true; r.load++;
// onload 事件回调
if( _isFn(s.onload) ){ s.onload.call(this, r); }
break;
case 'error': r.error++;
// onerror 事件回调
if( _isFn(s.onerror) ){ s.onerror.call(this, r); }
break;
case 'abort': r.abort++; break;
}
r.complete++;
// oncomplete 事件回调
if( _isFn(s.oncomplete) ){ s.oncomplete.call(this, r); }
// 判断全局加载
if( r.complete===imgset.length ){ _callback(); }
}
function _callback(){
clearTimeout( timer );
if( _isFn(s.complete) ){ s.complete.call({}, imgset, r); }
}
function _isFn(fn){ return toString.apply(fn)==='[object Function]'; }
return true;
}
</script>
</body>
</html>
链接主题：
javascript图片浏览器的核心——图片预加载
延迟加载图片 Lazy Load
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)