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

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 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助

  • JQuery加载图片自适应固定大小的DIV

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(

  • jQuery oLoader实现的加载图片和页面效果

    oLoader使用方法 不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载. 调用jQuery oLoader非常简单,一句话如下: 复制代码 代码如下: $('#element').oLoader(); 使用oLoader加载图片: 复制代码 代码如下: $(function(){   $('img').oLoader({     waitLoad

  • jquery中加载图片自适应大小主要实现代码

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 实现过程的主要代码: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 20

  • jQuery实现预加载图片的方法

    本文实例讲述了jQuery实现预加载图片的方法.分享给大家供大家参考.具体分析如下: 这段js代码用于预加载图片,记住是预加载,不是后加载哟,就是在图片还不显示的时候就将图片下载到用户浏览器的缓存中,这样要显示的时候就非常快,无需再到服务器上去读取图片. jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr('src', arg

  • jQuery延迟加载图片插件Lazy Load使用指南

    jQuery延迟加载图片插件Lazy Load使用指南

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 复制代码 代码如下: <sc

  • jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

    瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一般三四个)UL分布放置LI: 2.AJAX不一样 绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了.然后再对这个新插入的LI进行TOP和LEFT设置: 浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置.会自动向下排列: 一.功能分析: 1.定位每一个L

  • jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)

    浮动布局:即HTML结构的列,是用浮动方式. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX请求服务器数据: 3.将数据播入到相应的列队: 二.实现方法: 给window的scroll事件l绑定一个处理函数:做如下工作: 1.如何判断最后一行的图片,是否进入了可视区域? 如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值): 那么:就可以判定这个图片进入了浏览器的可视区域: 2.如何用AJAX请求服务器数据; $.getJSON()

  • jQuery滚动加载图片效果的实现

    复制代码 代码如下: <BR>/****************滚动加载图片函数****************/     function scrollLoading(){          var st = $(window).scrollTop(), sth = st + $(window).height();          var $targetpics = $("img.scrloadpic");          var len = $targetpics.

  • jquery动态加载图片数据练习代码

    jquery动态加载图片数据练习代码

    这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片. 思路: 1.首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片. 2.建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求. 3.然后当然要用到数据库啦,包括图片的路径,描述等信息.每张小图片路径应该对应一张大图

随机推荐