jQuery怎么实现图片的依次加载图片功能-创新互联

这篇文章给大家分享的是有关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是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

感谢各位的阅读！关于“jQuery怎么实现图片的依次加载图片功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前题目：jQuery怎么实现图片的依次加载图片功能-创新互联
文章来源：https://www.cdcxhl.com/article0/dpgcoo.html

成都网站建设公司_创新互联，为您提供网站导航、品牌网站制作、品牌网站建设、面包屑导航、搜索引擎优化、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联