慢慢买-实现懒加载的js分析

我得慢慢买

分析：

1.获取到 返回值info对象，info内有一个result的数组，数组中的每一项都是一条单独的数据，这个数组赋值给arr

2.arr通过数组的splice的方法，将前四项数据取出

​ ps: splice(起始位置，删除的个数，替换数据)

3.如果有删除操作，返回的值就是删除的数据

4.删除数组中的前四项，并将这四项数据保存在str这个数组中

5.将这个数组添加到info对象中

mm_discount_list 包裹ul的大盒子

6.本次渲染的数组是into.obj，即数组str，里面只有四条数据

$('.mm_discount_list ul').html(template('list_tmp', info))
console.log(info);

7.注册浏览器的滚动条的监听事件

   $(window).on("scroll", function () {
   var height = $(".mm_discount_list").height() + $(".mm_discount_list").offset().top -
      ($(window).scrollTop() + $(window).height());
      //
    if (height < -100) {
      var str = arr.splice(0, 2);
      info.obj = str;
      $(".mm_discount_list ul").append(template("list_tmp", info));
    }
  })

8.height = 包裹ul的父盒子的高度 + ul父盒子距离顶部的距离-(浏览器的距离顶部的距离+当前可视区的高度)
初始状态下：
$(".mm_discount_list").height() 是一个定值，

​ $(".mm_discount_list").offset().top是这个父盒子距离顶部的距离，该值为一个固定值，

​ $(window).scrollTop() 滚动条卷去的距离 初始状态为0

​ $(window).height() 当前窗口可视区的高度

​ 开始滚动
$(".mm_discount_list").height() 如果没有添加新的内容，不变

​ $(".mm_discount_list").offset().top 向上滚动变小

​ $(window).scrollTop() 向上滚动变大

​ $(window).height() 浏览器窗口，随着改变而改变，不动窗口大小值就不会变，正常情况下是固定值

​ 结论：整体值越来越小

9.判断高度是否小于-100，
如果高度小于-100，每次截取2条数据，添加到info的obj中，在dom对象的后面追加数据，数据依然是一个模板引擎的内容，本次渲染两条数据，满足条件一次，渲染一次。
ps：每次渲染完成后，ul的父盒子的高度发生改变，

$(function () {

  $.ajax({
    type: 'get',
    //请求的地址
    url: 'http://127.0.0.1:9090/api/getinlanddiscount',
    dataType: 'json',
    success: function (info) {
    
    //1.获取到 返回值info对象，info内有一个result的数组，数组中的每一项都是一条单独的数据，这个数组赋值给arr
    //2.arr通过数组的splice的方法，将前四项数据取出
    //ps: splice(起始位置，删除的个数，替换数据)
    //3.如果有删除操作，返回的值就是删除的数据
    
      var arr = info.result;
      
      //4.删除数组中的前四项，并将这四项数据保存在str这个数组中
      var str = arr.splice(0, 4);
      
      //5.将这个数组添加到info对象中
      info.obj = str;
      
      //mm_discount_list 包裹ul的大盒子
      //6.本次渲染的数组是into.obj，即数组str，里面只有四条数据
      $('.mm_discount_list ul').html(template('list_tmp', info))
      console.log(info);
      
      //7.注册浏览器的滚动条的监听事件
      $(window).on("scroll", function () {
        //height = 包裹ul的父盒子的高度 + ul父盒子距离顶部的距离-(浏览器的距离顶部的距离+当前可视区的高度)
        //初始状态下： 
        //$(".mm_discount_list").height() 是一个定值，
        //$(".mm_discount_list").offset().top是这个父盒子距离顶部的距离，该值为一个固定值，
        
        //$(window).scrollTop() 滚动条卷去的距离 初始状态为0
        
        //$(window).height() 当前窗口可视区的高度
        
        //开始滚动
        //$(".mm_discount_list").height() 如果没有添加新的内容，不变
        
        //$(".mm_discount_list").offset().top 向上滚动变小
        
        //$(window).scrollTop() 向上滚动变大
        
        //$(window).height() 浏览器窗口，随着改变而改变，不动窗口大小值就不会变，正常情况下是固定值
        
        //整体值越来越小
        
        //判断高度是否小于-100， 
        //如果高度小于-100，每次截取2条数据，添加到info的obj中，在dom对象的后面追加数据，数据依然是一个模板引擎的内容，本次渲染两条数据，满足条件一次，渲染一次。
        ps：每次渲染完成后，ul的父盒子的高度发生改变，
        var height = $(".mm_discount_list").height() + $(".mm_discount_list").offset().top -
          ($(window).scrollTop() + $(window).height());
          //
        if (height < -100) {
          var str = arr.splice(0, 2);
          info.obj = str;
          $(".mm_discount_list ul").append(template("list_tmp", info));
        }
      })
    }
  })

})