jquery implements image loading example code in sequence

css code:

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 code:

$(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 elementvar ul=$('<ul id="portfolio"></ul>');//append to div#wrapper$(ul).appendTo($('#wrapper'));
    //load the first imageLoadImage(0,max);
     }     //在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素function LoadImage(index,max){      
     if(index<max){       //利用attr方法为li元素增加了css样式，即加上了loading的gif背景。   
     var list=$(&#39;<li id="portfolio_&#39;+index+&#39;"></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]);
      }
    }
})

The above is the detailed content of jquery implements image loading example code in sequence. For more information, please follow other related articles on the PHP Chinese website!