css代码：
rush: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代码：
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 实现图片的依次加载图片。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文地址：https://www.jb51.cc/jquery/38064.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
