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 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery实现穿梭框功能
Jan 19 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
香妃
2021/03/03 冲泡冲煮
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
EJB3.1都有哪些改进
2012/11/17 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
岗位聘任书范文
2014/03/29 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
销售口号霸气押韵
2015/12/24 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
golang中的空接口使用详解
2021/03/30 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript