Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.04.2022, 21:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
вариант если ещё блоки с url добавляются к исходным.

<!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]
            });
            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});
        });
  </script>
</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 30.04.2022, 22:12
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение
Vaska,
вариант если ещё блоки с url добавляются к исходным.
Если ещё блоки с url добавляются к исходным в пределах #haupt или за его пределами?
Можете подробней объяснить логику последнего варианта?
Ответить с цитированием
  #13 (permalink)  
Старый 30.04.2022, 22:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Сообщение от Vaska
в пределах #haupt
типа

document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div id="content_e" class="inner-content" data-url="/six.html"></div>');
Ответить с цитированием
  #14 (permalink)  
Старый 30.04.2022, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
в нормальном случае, что добавляет блок, то и должно ставить блок на обработку, но можно использовать "сторожа" который добавленный блок, самостоятельно поставит в очередь(слежение,видно на экране, грузить контент или рано) на обработку.
Ответить с цитированием
  #15 (permalink)  
Старый 30.04.2022, 23:14
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

рони,
я так и не понял преимущества отслеживать блок отдельно.
Я добавил на страницу , в футер, в теги <script>
document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div id="content_e" class="inner-content" data-url="/six.html"></div>');

На странице, этот блок разместился вторым блоком, по счёту, в пределах ('#haupt .content_container'). У первого блока нет в классе inner-content.
Всем классам, у кого есть inner-content, добавился класс load. И новому блоку тоже, при первой загрузке страницы. Что это даёт, ведь уже есть класс inner-content.
При достижении нижней части ('#haupt .content_container'), этот второй блок подгрузился.
Это же не контролируемый вывод блока в области ('#haupt .content_container').
Я точно не понимаю задумки и где можно применить эту фичу.
Было бы хорошо на примерах объяснить где применять.
Ответить с цитированием
  #16 (permalink)  
Старый 01.05.2022, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
забей, я пытался угадать, что-бы это значило
Сообщение от Vaska
$(document).on('DOMNodeInserted', '#haupt', function() {
Ответить с цитированием
  #17 (permalink)  
Старый 01.05.2022, 00:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

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>
    <script>
        let r = 1;
        function addDiv()
        {
          document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', `<div class="inner-content" data-url="https://picsum.photos/300/100?${r++}"></div>`);
        }
    </script>
    <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});
        });
  </script>
</body>
</html>
Ответить с цитированием
  #18 (permalink)  
Старый 01.05.2022, 00:56
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение
Vaska,
забей, я пытался угадать, что-бы это значило
рони,
Это значит, что переинициализация будет проведена только внутри блока с id="haupt".
Ответить с цитированием
  #19 (permalink)  
Старый 01.05.2022, 00:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Сообщение от Vaska
переинициализация будет проведена только внутри блока с id="haupt".
не понимаю
Ответить с цитированием
  #20 (permalink)  
Старый 01.05.2022, 01:28
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

рони,
У меня браузер ругается на кавычки в последнем скрипте.
Uncaught SyntaxError: `` literal not terminated before end of script

А здесь на форме работает.
У меня нет.

Я думаю, что последние две модификации скрипта уже вышли за рамки моей задачи.
Моя задача решена уже здесь https://javascript.ru/forum/545079-post6.html

Последний раз редактировалось Vaska, 01.05.2022 в 01:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка контента из файла по ID в зависимости от ID нажатой кнопки oldeuboi Элементы интерфейса 3 16.11.2018 06:33
Скрипт смены контента в Div keystation Events/DOM/Window 23 11.03.2016 15:17
Загрузка ajax'ом в определенный div Daniel93 AJAX и COMET 12 23.02.2015 00:06
Загрузка в DIV Алллексей Элементы интерфейса 2 02.08.2013 14:54
Не получается загрузить баннер в раздел DIV методами Javascript через iframe ((( autobuh Общие вопросы Javascript 3 24.07.2009 18:24