jquery实现图片的依次加载图片

css代码:

ul#portfolio{margin:0;padding:0;}

ul#portfolio li{float:left;margin:0 5px 0 0;width:250px;height:250px;list-style:none;}

ul#portfolio li.loading{background:url(../images/spinner.gif) no-repeat center center;}

ul#portfolio li img{width:250px;height:250px;display:block;}

js代码：

$(function(){

var images=new Array();

images[0]='./images/ads_one.jpg';

images[1]='./images/ads_two.jpg';

images[2]='./images/ads_three.jpg';

//获取了图像的数量

var max=$(images).length;

//如果包含一张以上的图像，那么创建对应的UL元素加入到wrapper div 中，并且调用LoadImage方法

if(max>0){

var ul=$('<ul id="portfolio"></ul>');

$(ul).appendTo($('#wrapper'));

LoadImage(0,max);

}

//在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素

function LoadImage(index,max){

if(index<max)

{

var list=$('<li id="portfolio_'+index+'"></li>').attr('class','loading');

$('ul#portfolio').append(list);

var curr=$("ul#portfolio li#portfolioo_"+index);

//创建图像元素

var img=new Image();

//加载图像

$(img).load(function(){

$(this).css('display','none');

$(curr).removeClass('loading').append(this);

$(this).fadeIn('slow',function(){

LoadImage(index+1,max);

});

}).error(function(){

$(curr).remove();

LoadImage(index+1,max);

}).attr('src',images[index]);

}

}

})