Базовая бесконечная прокрутка/ленивая загрузка сообщений блога с помощью чистого JavaScript

Question

Я ищу легкое решение (надеюсь, без jQuery, но я открыт для предложений) для «ленивой загрузки» длинной HTML-страницы, которая индексирует тонны сообщений в блоге на стороне клиента. Большинство решений там ориентированы на AJAX для загрузки данных с серверной части или обработки разбиения на страницы. Мне нужно найти что-то, что будет работать с одной длинной страницей, полностью загруженной на клиентской стороне, которая бесконечно прокручивается.

Так HTML выглядит следующим образом:

<div id="blog-post"> 
     <h2 class="post-title">Cupcake ipsum.</h2> 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
     <hr> 
    </div> 

Этот отрывок идентичен в основном повторяет то же самое снова и снова. В основном я хочу показать 3 блога в начале, и как только прокрутка достигнет нижней части окна просмотра, я хочу раскрыть еще один набор из 3 сообщений.

Любые идеи о том, как я мог добиться этого с помощью чистого JavaScript? (ES6 возможно.)

Answer 1

Возможно, вам нужно добавить attr в ваш #blog-post div. Например, visible класс или что-то еще (Btw добавление id в div, который повторяется, не является хорошей идеей. Ваши скрипты не работают и будут работать только для первого элемента. Обычно вам нужно использовать class вместо id). Метод

window.onscroll = function(ev) { 
 
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { 
 
     // you're at the bottom of the page 
 
     // console.log("Bottom of page"); 
 

 
     var posts = document.querySelectorAll('.blog-post:not(.visible)'); 
 
     
 
     for(i = 0; i < posts.length; i++){ 
 
     if(posts[i] != undefined && i < 3){ 
 
      posts[i].className += "visible";   
 
     } 
 
     } 
 
    } 
 
};

.blog-post{ 
 
    /*display:none;*/ 
 
    opacity:0; 
 
    transition: opacity 5s; 
 
} 
 

 
.visible{ 
 
    /*display:block !important;*/ 
 
    opacity:1; 
 
}

<div class="blog-post visible"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="http://placehold.it/350x150"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div> 
 
<div class="blog-post"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div> 
 
<div class="blog-post"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div>

Scroll взяты из & испытания: https://stackoverflow.com/a/31264162/2259466

Примечания: Переход не работал, как ожидается, в моем коде. Вам тоже нужно использовать дисплей, но вы не можете использовать анимацию с ним (на самом деле, но вам нужно обходное решение). Или вы можете просто использовать анимацию в js, сложнее.

Так что в общем случае код должен выглядеть так. Я знаю, что это не завершено, но я надеюсь, что это даст вам представление об этом.