无限滚动的优化方案(二):懒加载实现

之前对预加载的实现方案做了介绍,这一篇文章主要是我对图片的懒加载的实现的一个总结。主要包括:

  1. 视区检测
  2. 图片懒加载及延迟显示

实例简介

之前一直对单页应用有兴趣,所以自己写了一个前端路由,相关的文章见这里,这个单页应用采取hash的方式实现路由。最终的实例页面见这里。仓库在这里是一个经典的单页应用。要做优化的就是主页的信息滚动。这些信息通过ajax从服务器端获取,这里为了方便,服务器端会一直返回数据,哪怕是重复的。页面如下:

Paste_Image.png

懒加载

可以看到,页面中,每一条消息都有一个图片,这个时候,如果在dom刚刚建立好,就对所有的图片进行加载,此时,占用过多的下载通道(我的是每次显示10条消息,接近页面底部时会预加载),会导致后面的信息加载速度变慢,用户体验不好。而图片懒加载是指:图片进入用户视野才会进行加载,而不是在dom树一构建好就进行加载。 道理很简单,但是我在实现的过程中还是碰到了一些问题,下面就是我的实现方案。

懒加载实现方案

总体变量以及函数定义

//记录图片的序号
let num = 0;
//记录是否正在获取数据,保证请求只做一次
let state = true;
//记录图片数据,index,src,height三个关键元素
var img_data =[];
//记录表单的距离页面顶端的距离
var list_height = 0;

function getH(obj) {
   //获得对象距离页面顶端的距离
}
function lazy_load(){
  //图片懒加载的实现函数
}
function getInfo(){
   //从服务器端获取商家发布的新信息
   //并向图片数据中存放图片信息 
}
function main(){
  //主函数
  //实现初始化
  //滚动事件的绑定等
}

获取元素相对页面顶部的高度

这个函数其实不难,主要涉及到目标元素下面几个属性:

  1. node.offsetTop:相对其父元素的位置
  2. node.offsetParent: 元素的父元素
    所以,要获取元素相对页面顶部的高度,其实只需要进行递归或者迭代就能实现,这里采用迭代实现:
function getH(obj) {
    var h = 0;
    while (obj) {
        h += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return h;
}

数据的缓存

程序中,通过Ajax从服务器获取数据,每次最多获取10条,在dom中,img标签最开始并不指定src,src存储在ajax获取到的信息中,我将其存入:img_data中,与它一同存入的,还有该图片的高度height,第几条信息index。
这里的height,可以采用上面的迭代得到,但是每次迭代对资源损耗比较大,事实上也是没有必要的,因为每条信息是固定的高度,所以根据其是第几条信息,再获取一个list相对页面顶部的高度,就能得到图片相对页面顶部的高度。我这里每个图片(100px)算上间隙(40px)就是140px,只需要获取整个列表相对顶部的高度,就能得到每个图片相对页面顶部的距离。
程序中大概像这样子:

img_data.push({
        index:(num),
        height:list_height+(140)*(num),
        src:data.src,
        loaded:false //定期清理,加载之后的图片信息进行清除,降低内存使用 
      })

视区的检测

图片是否落在用户视区,需要用到以下高度:

  1. height1:document.body.scrollTop:浏览器滚动的高度
  2. height2:document.body.clientHeight:可视区域的高度
  3. height3:node.height:也就是之前获取到的元素相对页面顶部的高度(并不是相对可视区域的顶部)
    当height3>heihgt1且height3<height2+height1的时候,可以认为这个元素是出现在用户视区的,从而将img_data的src赋值给这个块的img标签,当图片加载好之后,opacity配合transition实现动态的浮现(据说,人感觉这样加载的速度更快)。这一块大致的代码如下:
function lazy_load(){
var height1 = document.body.scrollTop+document.body.clientHeight;
  img_data.forEach(function(item){
    if(!item.loaded && item.height>document.body.scrollTop-100 && item.height < height1){
      var img = document.querySelector("img[img-index='"+item.index+"']");
//选择该图片
      if(img){
        img.src = item.src;
        item.loaded = true; //下面对img_data进行filter的函数,减少内存消耗
        img.onload = function(){
          img.style.opacity = 1;//配合transition可以实现一个渐入的效果
        }
        img.onerror = function(){
          img.style.opacity = 1;
          img.src = '/failed.jpg';//加载失败,
        }
      }
    }
  img_data = img_data.filter(function(item){
    return !item.loaded;
  })
}

滚动函数的绑定

直接将上述函数和window.onscroll进行绑定是不太理想的,因为滚动函数的触发频率很高,而视区的检测如果每次滚动都进行检测,那么,一方面造成性能上的损失,一方面,似乎所有的图片都能被检测到出现在了视区,从而导致所有的图片都会被加载,并没有起到懒加载的作用。所以在这里,我使用了函数消抖,原理也不难,网上的实现很多,这里给出我的实现:

method.debounce = function(func,delay){
  var timer;
  return function(){
    var args = arguments;
    var context = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
      func.apply(this,args);
    },delay);
  }
}

和上述lazy_load结合,进行绑定,代码如下:

var lazy_event = method.debounce(lazy_load,500);//此处500ms可以适当缩小
method.addevent(window,'scroll',lazy_event);

和消抖函数结合之后,用户的滚动不会触发lazy_load,只有当用户停止滚动才会执行lazy_load,从而达到图片懒加载的效果。

总结

这次无限滚动,我实现了两种方案:预加载与图片懒加载,配合消抖和节流以及缓存,能够很好的提升页面性能。希望面试的时候能用上吧。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,730评论 1 91
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 144,389评论 18 621
  • 昨夜 雨声阵阵,寒风瑟瑟 雷雨交加、闪电轰鸣,让人颤栗害怕 冷气逼人,让人感觉冷是从心中钻出来的! 这样的夜 最适...
    流年时光_fe16阅读 40评论 1 2
  • 《坚持一定就有收获!》 2017年 3月19日 星期日 晴今天是读经二年零342天,我的日记大楼盖到1...
    善行杭州熊宝妈阅读 40评论 0 0
  • 一,NLP的定义N 指头脑 个人心理素质的提升L 指语言 个人人际关系的提升P 指程序 (可操作,可复制,高阶特征...
    正能量天使阅读 538评论 0 2