отображение скрытых данных через scrollTop. Имитация ленивой загрузки
Накидал код отображения данных, по событию $(window).scroll(). Все работает хорошо, за исключением одного момента. Скрипт срабатывает только 1 раз. Т.е. загрузиться 10 блоков и все на этом. Спускаю еще раз ниже скроллбар и ничего не происходит. Подскажите, пожалуйста, что поменять?
$(document).ready(function () {
$('.blog_content:lt(10)').css("display", "flex");
$(window).scroll(function (event) {
event.preventDefault();
if($(window).scrollTop() >= $("html").height()){
setTimeout(function() {
size_li = $(".blog_content").length;
x=10;
x=(x+10 <= size_li) ? x+10 : size_li;
$('.blog_content:lt('+x+')').css("display", "flex");
}, 1500);
}
});
});.blog_content {
display: none;
flex-direction: row;
justify-content: space-between;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
<div class="blog_content">
<p>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
</div>