Vaska,
как-то так, зачем нужно id не понимаю, jquery учитывает скрипты на странице, парсит и запускает отдельно, и то что вы сделали вручную, там заложено.
<!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;
}
footer {
background: cyan;
min-height: 500px;
}
</style>
<title></title>
</head>
<body>
<header>
<div>
other content
</div>
<p>text two</p>
</header>
<div id="haupt">
<div id="acidhaupt" class="haupt-wrap background-color">
<div class="content_container">
<div id="content_a" class="inner-content" data-url="/first.html"></div>
<div id="content_b" class="inner-content" data-url="/second.html"></div>
<div id="content_c" class="inner-content" data-url="/third.html"></div>
<div id="content_d" class="inner-content" data-url="/fourth.html"></div>
</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;
$(div).load(url);
observer.unobserve(div);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
document.querySelectorAll('.inner-content').forEach(div => observer.observe(div))
});
</script>
</body>
</html>