图片懒加载 与 下拉加载更新数据

懒加载应该是现在网站提高性能常用的的方法之一，小白们可能会想，嗯，我知道，或者我看过，就是动手操作少，没错我就是这样的小白，在网上看过千遍万遍不如动手操练一遍，所以在我操练之后大概来个小总结，哈哈哈见笑了(有错误希望大家及时指出)

首先先说说懒加载和预先加载的区别哈

懒加载：就是需要数据的的时候在加载，不用的时候我不加载

预加载：就是提前把 数据加载好

拿图片懒加载为例哈：

第一步：首先你需要获取所有img标签

var aImg = document.querySelectorAll('img');

第二步：获取地理位置信息

var scrollT = $(window).scrollTop();

var winH = $(window).height();

如果当前图片到文档顶部的距离当前浏览器的高度+滚动条距离顶部的距离，我们就加载图片
说到加载图片我们首先把图片的地址存在data-src中，加载的时候把data-src的属性赋值给src

  if (aImg[i].offsetTop < scrollT + winH) {
       aImg[i].src = aImg[i].getAttribute('data-src');
 }

那就是这样

    function loadImg() {
        var scrollT = $(window).scrollTop();
        var winH = $(window).height();
        var aImg = document.querySelectorAll('img');
        var len = aImg.length;
        for (var i = 0; i < len; i++) {
            if (aImg[i].offsetTop < scrollT + winH) {
                aImg[i].src = aImg[i].getAttribute('data-src');
            }
        }
    }

如果想实现下拉，加载接口下一页的数据，可以下面的方法实现
var URL = 'moubao.com/goods?page=…'
题外：下拉加载下一页的数据

    function loadPage() {
        var n = 0;
        var len = vm.array.length;
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop();
        var winH = $(window).height();
        var aa = (pageH - winH - scrollT) / winH;
        if (aa < 0.5) {
            getData(i);
        }
        flag = false;
    }

     注：getData()函数
     function getData(pagenumber){
     i++
     $.ajax({
          type: 'get',
          url: URL,
          data: { page: pagenumber, size: gPageSize },
          dataType: 'json',
          success: function(ajaxData) {
              console.log(ajaxData);
          },
      });
    }

不过在调用loadImg()的时候，别直接写loading（），放在例如
$('window').scroll(functin(){
loagImg();
loadPage();
});
因为，两个函数都要实时获取到

$(document.body).height();
$(window).scrollTop();
$(window).height();

的值
所以大概这样吧，我在做公司的新人项目，就把其中的一些东西做一些小的总结，如果有写的不好的地方，欢迎大家指出……^_^