jQuery 实现图片的依次加载图片功能

本文分为css和js代码两部分给大家详细介绍了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-600'; images[1]='./images/ads_two.jpg-600'; images[2]='./images/ads_three.jpg-600'; //获取了图像的数量 var max=$(images).length; //如果包含一张以上的图像，那么创建对应的UL元素家人到wrapper div中，并且调用LoadImage方法。 if(max>0){ //create the UL element var 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=$('
').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 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

以上就是jQuery 实现图片的依次加载图片功能的详细内容，更多请关注本站其它相关文章！