Как добавлять картинку при дохождения до конца страницы?

Question

Как добавлять картинку при дохождения до конца страницы?

Петя Косинов Знаток (372), на голосовании 10 месяцев назад

Нужно добавлять картинку каждый раз, когда дохожу до конца строки. Есть такой код, который добавляет текст бексконечно, как его переписать для картинки? Я новичок в этом

<!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>

Answer 1

Есть медиа запросы в CSS они срабатывают при определённых размерах экрана.