jQuery 实现图片的依次加载图片功能
css代码：
ul#portfolio{margin:0;padding:0;}
ul#portfolioli{float:left;margin:05px00;width:250px;height:250px;list-style:none;}
ul#portfolioli.loading{background:url(../images/spinner.gif)no-repeatcentercenter;}
ul#portfolioliimg{width:250px;height:250px;display:block;}
js代码：
$(function(){
varimages=newArray();
images[0]='./images/ads_one.jpg';
images[1]='./images/ads_two.jpg';
images[2]='./images/ads_three.jpg';
//获取了图像的数量
varmax=$(images).length;
//如果包含一张以上的图像，那么创建对应的UL元素家人到wrapperdiv中，并且调用LoadImage方法。
if(max>0){
//createtheULelement
varul=$('');
//appendtodiv#wrapper
$(ul).appendTo($('#wrapper'));
//loadthefirstimage
LoadImage(0,max);
}
//在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素
functionLoadImage(index,max){
if(index').attr('class','loading');
//把li添加到ul元素中
$('ul#portfolio').append(list);
//获取当前的li元素
varcurr=$("ul#portfolioli#portfolio_"+index);
//创建图像元素
varimg=newImage();
//加载图像
$(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实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！