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

秒速五厘米 2022-04-05 04:40 493阅读 0赞

**加载源**

// 这里存后台发来的数据
    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 ();
      }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，493人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现懒加载

在现实中我们都可以在各大电商网站上看到懒加载这个技术，懒加载也分很多种类型，接下来直接上硬菜 1.懒加载第一步导入懒加载js[懒加载包请访问楼主github地址][gi

- 日理万妓/ 2023年05月29日 11:46/ 0 赞/ 31 阅读

相关 JS 实现图片延迟加载（懒加载）

实现原理 1. 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 2. 最开始，img 的 src 设置默认

客官°小女子只卖身不卖艺/ 2022年12月29日 06:43/ 0 赞/ 690 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 507 阅读

相关 lazyload.js实现懒加载

1：引入 <script type="text/javascript" src="assets/js/jquery.lazyload.min.js"></script>

超、凢脫俗/ 2022年06月04日 00:16/ 0 赞/ 435 阅读

相关 js实现图片懒加载

概述如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？详细代码下载：[htt

分手后的思念是犯贱/ 2022年05月31日 10:35/ 0 赞/ 488 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 05:35/ 0 赞/ 432 阅读

相关 js实现图片懒加载

最近复习下js、简单实现一下图片的懒加载思路其实很简单：页面的img默认加载一张lodaing图片、速度会快一点、其他图片当显示在当前窗口的时候再获取data-src属

叁歲伎倆/ 2022年04月23日 09:34/ 0 赞/ 512 阅读

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

加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg",

秒速五厘米/ 2022年04月05日 04:40/ 0 赞/ 494 阅读

相关 JS实现图片懒加载

JS实现图片懒加载懒加载技术懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的

╰半夏微凉°/ 2021年10月29日 12:20/ 0 赞/ 802 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把`img`元素或是其他元

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 751 阅读