CODEWITHSUNDEEP
javascripthtmljquerylazy-loadingjquery-lazyload
pohofo
pohofo

Reputation: 99

JavaScript - lazy load <li> element

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

});

Upvotes: 0

Views: 1337

Answers (1)

SecurityObscurity
SecurityObscurity

Reputation: 439

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

Upvotes: 0

Related Questions