Показать сообщение отдельно
  #2 (permalink)  
Старый 29.04.2022, 23:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

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: hidden;
        }

        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 class="inner-content" data-url="/first.html"></div>
        <div class="inner-content" data-url="/second.html"></div>
        <div class="inner-content" data-url="/third.html"></div>
        <div class="inner-content" data-url="/fourth.html"></div>
      </div>
    </div>
  </div>
  <footer>
    <p>footer content</p>
  </footer>
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            const lazyShow = divs => {
                divs.forEach(e => {
                    if (e.intersectionRatio < .3) return;
                    let div = e.target,
                        url = div.dataset.url;
                    (async () => {
                        let response = await fetch(url);
                        let html = await response.text();
                        div.innerHTML = html;
                    })()
                    observer.unobserve(div);
                });
            };
            let observer = new IntersectionObserver(lazyShow, {
                rootMargin: "50px",
                threshold: [.3]
            });
            document.querySelectorAll('.inner-content').forEach(div => observer.observe(div))

        });
  </script>
</body>
</html>
Ответить с цитированием