189 8069 5689
这篇文章给大家分享的是有关jQuery怎么实现图片的依次加载图片功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联公司主营岳池网站建设的网络公司,主营网站建设方案,成都app软件开发公司,岳池h5小程序定制开发搭建,岳池网站营销推广欢迎岳池等地区企业咨询
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('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是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
感谢各位的阅读！关于“jQuery怎么实现图片的依次加载图片功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！