Есть страница с контентом, необходимо частями загружать контент, чтобы получился бесконечный скролл, какой можно использовать плагин или есть какой-нибудь пример?
1 ответ
Такое?
let robot = 4, items_number = 2
onscroll = e => {
const current_item = Math.round(pageYOffset / innerHeight)
if(current_item === items_number - 1) {
createItem(loadImage(`https://robohash.org/set=set1/${robot}`))
items_number++; robot++
}
}
async function loadImage(url) {
const response = await fetch(url)
const data = await response.blob()
return URL.createObjectURL(data)
}
async function createItem(x) {
const item = document.createElement('li')
const image = document.createElement('img')
image.src = await x
item.appendChild(image)
list.appendChild(item)
}
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
ul {
width: 100%;
list-style: none;
}
li {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
--s: calc(20vw + 20vh);
width: var(--s);
height: var(--s);
}
<ul id=list>
<li>
<img src="https://robohash.org/set=set1/0">
</li>
<li>
<img src="https://robohash.org/set=set1/2">
</li>
</ul>
-
Добрый день, да, только вместо картинок к примеру блок с информацией, где будет текст, картинки и видео. Как это можно реализовать? 14 июл 2020 в 20:07
-
@ДмитрийМоисеев так все тоже самое.– user35528614 июл 2020 в 20:25
-
Только вместо пункта списка, будете создавать целый блок со всем что вам нужно– user35528614 июл 2020 в 20:26