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){
 //create the UL element
 var ul=$('<ul id="portfolio"></ul>');
 //append to div#wrapper
 $(ul).appendTo($('#wrapper'));
 //load the first image
 LoadImage(0,max);
 }
 //在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素
 function LoadImage(index,max){
 if(index<max){
 //利用attr方法为li元素增加了css样式，即加上了loading的gif背景。
 var list=$('<li id="portfolio_'+index+'"></li>').attr('class','loading');
 //把li添加到ul元素中
 $('ul#portfolio').append(list);
 //获取当前的li元素
 var curr=$("ul#portfolio li#portfolio_"+index);
 //创建图像元素
 var img=new Image();
 //加载图像
 $(img).load(function(){
 $(this).css('display','none');
 $(curr).removeClass('loading').append(this);
 $(this).fadeIn('slow',function(){
 //采用回调函数的方法，在当前元素成功执行fadeIn方法之后 再去调用下一个元素的LoadImage方法，这样就能实现多个图像的顺序加载了。
 LoadImage(index+1,max);
 });
 }).error(function(){
 $(curr).remove();
 LoadImage(index+1,max);
 }).attr('src',images[index]);
 }
 }
})

以上所述是小编给大家介绍的jQuery 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！