当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery 实现图片的依次加载图片功能

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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 实现图片的依次加载图片，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网