JavaScript - lazy load <li> element

Question

Is there any way I can lazy load li elements on scroll with basic js functions? I found some example which I did not succeed to adjust to my example.

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

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

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

       ..etc

      </ul>
   </div>

I am pretty new with JavaScript and this is my working JS code. Thanks.

$(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();

});

SecurityObscurity · Accepted Answer · 2021-08-11 10:06:54Z

0

How about the following

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;

  }
});

from https://codepen.io/kvzivn/pen/MYKMVG

answered Aug 11, 2021 at 10:06

SecurityObscurity

4393 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pohofo Over a year ago

Thank you. Can this example be applied to my twig html view with foreach as I am looping trough data from PHP metod? @SecurityObscurity

SecurityObscurity Over a year ago

@pohofo yes you can, just grab the data from the php and place them on the html and let js do the rest, check the codepen

Collectives™ on Stack Overflow

JavaScript - lazy load <li> element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related