zoukankan      html  css  js  c++  java
  • 给动态加载的图片添加延迟加载(附在线demo)

    功能需求:

      当滚动条拖动页面底部时用js将数据拼装成html插入页面中,由于每次获取的图片数据比较多(一次50张图片吧),所以必须给图片添加延迟加载。

         这是最近在公司做的一个功能,以下是我的解决思路和代码,欢迎高手指正。

    解决思路:

        由于滚动加载还是比较简单的,主要讲下怎么实现图片的延迟加载。

        简单的思路就是把每次动态添加的图片对象都保存在一个数组里,当滚动的时候遍历数组,获得图片相对窗口的偏移量offset().top去减去一个高度,

        如果小于当前滚动条的高度就给图片添加src属性,并设置一个值代表图片已经加载。再将已加载过的图片从数组中删除。

        以下是测试的代码,在线demo点击这里  源码下载

     测试数据

     var data=[['<div class="imgbox"><img original="img/1.jpg"></div>','<div class="imgbox"><img original="img/2.jpg"></div>','<div class="imgbox"><img original="img/3.jpg"></div>',
          '<div class="imgbox"><img original="img/4.jpg"></div>','<div class="imgbox"><img original="img/5.jpg"></div>','<div class="imgbox"><img original="img/6.jpg"></div>',
          '<div class="imgbox"><img original="img/10.jpg"></div>'],
          ['<div class="imgbox"><img original="img/11.jpg"></div>','<div class="imgbox"><img original="img/12.jpg"></div>','<div class="imgbox"><img original="img/13.jpg"></div>',
          '<div class="imgbox"><img original="img/14.jpg"></div>','<div class="imgbox"><img original="img/15.jpg"></div>','<div class="imgbox"><img original="img/16.jpg"></div>',
          '<div class="imgbox"><img original="img/17.jpg"></div>']];
    <script>
          $(document).ready(function(){
             var curpage=1,pageCount=2,imgarray =new Array(); 
    var threshold =400;                  //获得可视范围下多少像素的图片  $(window).bind('scroll', function() { var sh = document.body.scrollHeight; //获得页面内容的高度 var ch = document.documentElement.clientHeight;  //获得可见区域高度 var ss = document.documentElement.scrollTop + document.body.scrollTop; //获得滚动条滚过的高度 if (ss + ch +300 >= sh) { if (curpage <= pageCount) {
                  var container = $("#container"); var html =data[curpage-1]; $.each(html,function(i){ var obj = $(html[i]); var img = obj.find("img"); imgarray.push(img);    //将图片对象放入数组 container.append(obj); }) curpage++; } else $(this).unbind('scroll'); } //延迟加载图片 if (imgarray.length != 0) { //删除以加载的图片 var temp = $.grep(imgarray, function(element) { return !element.loaded; }); imgarray = $(temp); $(imgarray).each(function() { var self = this; if ($(self).offset().top - threshold < ss+ch) {      //获得可视范围下400px的图片 $(self).attr("src", $(self).attr("original")); //添加src属性 self.loaded = true;                 //添加以加载属性 } });

     

    如果还有更好的实现方式,或性能更好的写法,欢迎指点

      

  • 相关阅读:
    你要结婚了丶
    20150806这是个悲伤的日子。
    今天是我的生日。
    这是从word发的第一篇博客。
    【关于JavaScript】自动计算的实例
    【关于JavaScript】常见表单用户名、密码不能为空
    【关于php】Appserv中关于DW配置站点问题
    【关于php】Appserv的安装注意事项
    【无题】写在5月18日
    HTML中如何添加日历插件(JQUERY)
  • 原文地址:https://www.cnblogs.com/lijie/p/2534931.html
Copyright © 2011-2022 走看看