原生JS JavaScript实现懒加载效果

我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。

懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。

话不多说，开始展示吧.

 

这个懒加载效果使用滚动条事件触发，每当滚动条触底一次就会将全部数据重新截取重新载入。每次向下滑动，距离顶部的距离都会改变，每一段距离需要截取的信息数量都不同，用当前距离顶部的高度值除以单条数据的高度（可能有时需要减去第二张图片的a值），再乘以每一行的的列数，就是当前距离顶部高度需要截取的信息数量。比如第二张图片中，我向下滑动了t像素的距离，就需要用t来除以每一张图片及下部文字盒子的高度，再乘以六列的6，就是当前距离需要截取的信息数量。需要注意我这个不是添加新的数据，而是将全部数据进行一重新截取，每一次截取数量大于上一次截取数量，来达到懒加载的效果。

代码如下：

上面两张的信息是使用Ajax请求的，这里为了方便诸位实验，我便将数据写入js里。

    
    
    
    




    

        
本周热度