Как добавлять картинку при дохождения до конца страницы?
Петя Косинов
Знаток
(372),
на голосовании
10 месяцев назад
Нужно добавлять картинку каждый раз, когда дохожу до конца строки. Есть такой код, который добавляет текст бексконечно, как его переписать для картинки? Я новичок в этом
<body> <div id="infinite-scroll"> <div> <script> for( let i = 0; i < 100; i++ ) document.write("<div>Случайный текст или еще, что то</div>"); </script> </div> </div>
var block = document.getElementById('infinite-scroll'); var counter = 1;
var contentHeight = block.offsetHeight; // 1) высота блока контента вместе с границами var yOffset = window.pageYOffset; // 2) текущее положение скролбара var window_height = window.innerHeight; // 3) высота внутренней области окна документа var y = yOffset + window_height;
<!doctype html>
<html>
<head>
<img src=" https://e7.pngegg.com/pngimages/957/650/png-clipart-christmas-tree-christmas-tree-leaf-holidays.png ">
<meta charset="utf8" />
<title>Бесконечный скроллинг с JavaScript</title>
</head>
<body>
<div id="infinite-scroll">
<div>
<script>
for( let i = 0; i < 100; i++ )
document.write("<div>Случайный текст или еще, что то</div>");
</script>
</div>
</div>
<script>
window.addEventListener("scroll", function(){
var block = document.getElementById('infinite-scroll');
var counter = 1;
var contentHeight = block.offsetHeight; // 1) высота блока контента вместе с границами
var yOffset = window.pageYOffset; // 2) текущее положение скролбара
var window_height = window.innerHeight; // 3) высота внутренней области окна документа
var y = yOffset + window_height;
// если пользователь достиг конца
if(y >= contentHeight)
{
//<img src=" https://e7.pngegg.com/pngimages/957/650/png-clipart-christmas-tree-christmas-tree-leaf-holidays.png ">
//загружаем новое содержимое в элемент
block.innerHTML = block.innerHTML + "<div>Случайный текст или еще, что то</div>";
}
});
</script>
</body>
</html>