JS简单实现滚动自动加载新内容（懒加载）

版权声明：觉得有帮助到你的话，请在右边点个赞吧！ https://blog.csdn.net/u011215669/article/details/84947036

加载源

// 这里存后台发来的数据
var galleryList = [
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  }
];

单个渲染函数

//渲染单个GalleryItem
function renderGalleryItem(item) {
  const aItem = document.createElement("div");
  const inner = `<div>
                  <p class="card__text"> ${item.desc} </p>
                  <img src=${item.src} />
                </div>`;
  aItem.innerHTML = inner;
  return aItem;
}

批量渲染函数

const galleryAutoLoad = (list => {
  //用于记录当前到第几个
  let cur = 0;
  //每次调用函数渲染多少个
  const step = 1;
  return () => {
    for (let i = cur; i < cur + step; i++) {
      if (list[i]) {
        //将渲染的添加到dom节点上 appendChild用来添加，加入需要覆盖的话可以直接用innerHTML
        container.appendChild(renderGalleryItem(list[i]));
      } else {
        break;
      }
    }
    cur += step;
  };
})(galleryList); //这是内容变量

绑定事件

//滚动加载
$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if (scrollTop + windowHeight == scrollHeight) {
    galleryAutoLoad ();
  }
});