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.webp) 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.webp';  images[1]='./images/ads_two.webp';  images[2]='./images/ads_three.webp';  //获取了图像的数量  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 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！