jQuery效果之jQuery实现图片的依次加载图片

时间：2023-12-26 19:55:25

css代码：

ul#portfolio{margin:;padding:;}

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]);

      }

    }

})

相关文章