Подгрузка (псевдо) блоков по запросу
Иногда требуется не захламлять страницу огромным массивом картинок или текста. Желательно, чтобы при загрузке страницы, часть этих блоков была скрыта. Ну а далее, при нажатии на кнопку можно догружать нужные блоки. Для появления блоков я написал небольшой скрипт. По сути, скрипт находит блоки с атрибутом hidden и удаляет этот атрибут у определенного количества блоков. Так же можно с помощью setTimeout добавить или удалить определенные стилевые классы, если необходимо, например, плавное появление. Но это требуется крайне редко.
HTML
<div class="page">
<div class="container">
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos perferendis atque quisquam culpa iste fuga, expedita quod minima, quia reprehenderit quaerat nulla! Consequuntur, perspiciatis placeat ex sunt corrupti doloribus aperiam fugit quos laborum culpa cumque quod voluptates itaque modi minima animi omnis laudantium quae iusto ut temporibus.</p>
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos perferendis atque quisquam culpa iste fuga, expedita quod minima, quia reprehenderit quaerat nulla! Consequuntur, perspiciatis placeat ex sunt corrupti doloribus aperiam fugit quos laborum culpa cumque quod voluptates itaque modi minima animi omnis laudantium quae iusto ut temporibus. Necessitatibus reprehenderit sunt esse, tempore voluptatem modi fuga dolores rem ex veritatis mollitia delectus.</p>
<p class="text" hidden>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos perferendis atque quisquam culpa iste fuga, expedita quod minima, quia reprehenderit quaerat nulla! Consequuntur, perspiciatis placeat ex sunt corrupti doloribus aperiam fugit quos laborum culpa cumque quod voluptates itaque modi minima animi omnis laudantium quae iusto ut temporibus. Necessitatibus reprehenderit sunt esse, tempore voluptatem modi fuga dolores rem ex veritatis mollitia delectus. </p>
<p class="text" hidden>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos perferendis atque quisquam culpa iste fuga, expedita quod minima, quia reprehenderit quaerat nulla! Quidem nam quos nostrum dicta labore possimus numquam ullam culpa fugit animi, molestias quisquam totam doloribus assumenda velit soluta cumque repellendus voluptate. Dolore corporis saepe amet accusamus. Accusamus, itaque amet minus consequatur soluta dignissimos deserunt quaerat nesciunt placeat sed eum tempora fugit quam vero optio aliquid provident enim eligendi?</p>
<p class="text" hidden>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos perferendis atque quisquam culpa iste fuga, expedita quod minima, quia reprehenderit quaerat nulla! Consequuntur, perspiciatis placeat ex sunt corrupti doloribus aperiam fugit quos laborum culpa cumque quod voluptates itaque modi minima animi omnis laudantium quae iusto ut temporibus.</p>
<!-- МОЖНО СДЕЛАТЬ СКОЛЬКО УГОДНО БЛОКОВ -->
<button class="load">Загрузить еще</button>
</div>
</div>JavaScript
document.querySelector(".load").addEventListener("click", function () {
loadMore.call(this, 3); // call цепляет this и применяется к нему
});
function loadMore(n) {
let hiddenBlocks = this.parentElement.querySelectorAll("[hidden]");
hiddenBlocks.forEach((el) => {
el.style.opacity = 0;
el.style.transition = "1000ms";
});
if (hiddenBlocks.length > n) {
for (let i = 0; i < n; i++) {
hiddenBlocks[i].removeAttribute("hidden");
setTimeout(() => {
hiddenBlocks[i].style.opacity = 1;
}, i * 500);
}
} else if (hiddenBlocks.length < n && hiddenBlocks.length > 0) {
for (let i = 0; i < hiddenBlocks.length; i++) {
hiddenBlocks[i].removeAttribute("hidden");
setTimeout(() => {
hiddenBlocks[i].style.opacity = 1;
}, i * 500);
}
this.remove();
} else {
return;
}
// console.log(hiddenBlocks.length);
}
Рабочий, демонстрационный вариант на странице CodePen