jQuery 实现图片的依次加载图片功能


Posted in jQuery onJuly 06, 2017

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=$('<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]);
   }
  }
})

以上所述是小编给大家介绍的jQuery 实现图片的依次加载图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
Symfony控制层深入详解
2016/03/17 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python科学计算之scipy——optimize用法
2019/11/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
openCV提取图像中的矩形区域
2020/07/21 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
mysql部分操作
2021/04/05 MySQL
CSS完成视差滚动效果
2021/04/27 HTML / CSS