php 图片 依次 加载,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=$('

//append to div#wrapper

$(ul).appendTo($('#wrapper'));

//load the first image

LoadImage(0,max);

}

//在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素

function LoadImage(index,max){

if(index

//利用attr方法为li元素增加了css样式，即加上了loading的gif背景。

var list=$('

').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 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！