jquery 实现图片的依次加载图片

发布时间:2017-7-9 7:15:23编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jquery 实现图片的依次加载图片 ",主要涉及到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]);
      }


上一篇:R语言之正则表达式
下一篇:CXGRID用法(取行、列值;定位选中某行等等)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款