Vaska,
тоже самое, обычный вариант без "сторожа-наблюдателя", добавили элемент, внесли элемент в очередь.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header {
background: cyan;
min-height: 100px;
}
.content_container {
background: rgba(255, 0, 0, 0.3);
padding: 20px;
}
.inner-content {
height: 400px;
margin: 5px;
background: red;
overflow: scroll;
background-repeat: no-repeat;
background-size: cover;
}
footer {
background: cyan;
min-height: 500px;
}
</style>
<title></title>
</head>
<body>
<header>
<div>
other content
</div>
<p>text two</p>
<input name="" type="button" value="addDiv" onclick="addDiv()">
</header>
<div id="haupt">
<div id="acidhaupt" class="haupt-wrap background-color">
<div class="content_container">
</div>
</div>
</div>
<footer>
<p>footer content</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lazyShow = divs => {
divs.forEach(e => {
if (e.intersectionRatio < .3) return;
let div = e.target,
url = div.dataset.url;
setTimeout(_ => div.style.backgroundImage = 'url(' + url + ')', 600) //имитация грузим контент с сервера
observer.unobserve(div);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
let parent = document.querySelector('#haupt');
const add = () => parent.querySelectorAll('.inner-content:not(.load)').forEach(div => {
observer.observe(div);
div.classList.add('load');
});
add();
/*let listObserver = new MutationObserver(add); //отслеживание появления новых блоков .inner-content в #haupt
listObserver.observe(parent, { childList: true, subtree: true});*/
let r = 1;
document.querySelector('[value="addDiv"]').addEventListener('click', function() {
document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div class="inner-content" data-url="https://picsum.photos/300/100?' + (r++) + '"></div>');
add();
})
});
</script>
</body>
</html>