Dynamic Content LazyLoad

by Faisal Khan Janjua

HTML

<div id="appendDiv"></div>

CSS

.element-class{
    background-color: #999;
    margin: 10px;
    float: left;
}

JavaScript

for(var i=0; i<=40; i++){
	var x = Math.floor((Math.random() * 300) + 50),
			y = Math.floor((Math.random() * 300) + 100);
	$('#appendDiv').append('<div class="element-class"></div>');
  $('.element-class:last-child').attr('id',i).text(i).css({'width': x, 'height':y});
};
$(".element-class:gt(5)").css("display", "none");

var lastidnum = "6";
$(window).on('resize scroll', function() {
    var scrollTop = $(window).scrollTop(),
        elementOffset = $("#" + (lastidnum - 1)).offset().top,
        distance = (elementOffset - scrollTop);

    if (distance <= 450) {
        $("#" + lastidnum).fadeIn("slow");
        lastidnum++;
    }
});