jquery实现图片依次加载实例代码

零下一度

发布时间：2017-07-20 14:25:06

1749人浏览过

来源于php中文网

原创

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代码：

Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

下载

$(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=$('');//append to div#wrapper$(ul).appendTo($('#wrapper'));
    //load the first imageLoadImage(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]);
      }
    }
})

实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID

如何实现基于主下拉框动态筛选并提交子下拉框的完整表单

HTML 下拉联动：基于主选项动态筛选子选项并保留 value 值用于表单提交

HTML 下拉联动：基于主分类动态更新子分类并保留 value 值用于表单提交

实现 HTML 下拉联动并保留表单提交所需的 value 值

相关标签:

jquery

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：ajaxfileupload上传时出现的问题详解下一篇：easyui的datagrid组件页面加载后发送两次请求的解决办法

作者最新文章

分享一个sqlyog连接数据库乱码的问题以及解决方法

2018-05-29 10:51