JavaScript - 延迟加载 <li> 元素

Question

有什么方法可以使用基本的 js 函数在滚动时延迟加载 li 元素？ 我发现了一些我没有成功适应我的例子的例子。

<div class="col-md-12">
    <ul class="timeline">

       <li class="lazyload">
           // content
         </li>

        < li class="lazyload">
           // content
         ​</li> 

       ..etc

      </ul>
   </div>

我对 JavaScript 很陌生，这是我的工作 JS 代码。 谢谢。

$(document).ready(function () {

function lazyload()
{
    var wt = $(window).scrollTop();    //* top of the window
    var wb = wt + $(window).height();  //* bottom of the window

    $(".ads").each(function () {
        var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
        var ob = ot + $(this).height(); //* bottom of object

        if (!$(this).attr("loaded") && wt<=ob && wb >= ot) {
            $(this).html("lazyload");
            $(this).attr("loaded",true);
        }
    });
}

$(window).scroll(lazyload);
lazyload();

});

Answer 1

下面怎么样

var mincount = 20;
var maxcount = 40;

$(".image-gallery-ul li").slice(20).hide();

$(".image-gallery-list").scroll(function() {

  if($(".image-gallery-list").scrollTop() + $(".image-gallery-list").height() >= $(".image-gallery-list")[0].scrollHeight) {
    
    $(".image-gallery-ul li").slice(mincount,maxcount).fadeIn(1000);

    mincount = mincount+20;
    maxcount = maxcount+20;

  }
});

来自https://codepen.io/kvzivn/pen/MYKMVG