Блог

Есть ли какой-нибудь способ ленивой загрузки элементов li в прокрутку с помощью основных функций js? Я нашел какой-то пример, который мне не удалось подогнать под свой пример.

 <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") amp;amp; wt<=ob amp;amp; wb >= ot) {
            $(this).html("lazyload");
            $(this).attr("loaded",true);
        }
    });
}

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

});

Как насчет следующего

 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