Подгрузка чанков по мере прокрутки страницы

Добрый вечер. Работаю в ModX 2.8.7
В ходе оптимизации сайта для Google столкнулся с проблемой — слишком длинная главная страница.

Сама страница состоит из большого и длинного шаблона с разными html блоками. В итоге Google ругается, что слишком длинная страница, долгое время загрузки и так далее…

Если бы на стр были всплывающие окна, блоки типа блога, товаров, новостей — видел варианты их подгрузки по мере прокрутки страницы.
НО
КАК организовать подгрузку ЧАНКОВ по мере прокрутки страницы?
Т.е. пример: Google загружает слайдер, меню и еще какой-то блок. Прокручиваем дальше… На Ajax происходит подгрузка блока О компании, проматываем, подгружается Преимущества, продолжаем спускаться… подгружаются… Загружается блок Footer. Страница кончилась…
Матвей
Матвей
17 июля 2024, 01:36
modx.pro
852

Комментарии: 1

Артур Шевченко
Артур Шевченко
17 июля 2024, 10:02
Примерно так
const resultBlock = document.querySelector('#wrapper'); 
const observer = new IntersectionObserver(scrollHandler, {
    threshold: 0.5
});
observer.observe(resultBlock.lastElementChild);
function scrollHandler(entries, observer) {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
             // тут отправка запроса на сервер за следующим блоком.
            observer.unobserve(entry.target); // после получения следующего блока нужно привязать к нему наблюдателя           
         }
    })
}
Суть в следующем. Ты создаёшь наблюдателя, который будет наблюдать за попаданием в область видимости последнего дочернего элемента блока #wrapper, когда этот элемент будет виден на 50%, ты отправляешь запрос на сервер и получаешь следующий блок, который вставляешь на страницу. Затем опять находишь последний дочерний элемент и передаёшь его в наблюдателя и так кпока блоки не закончатся.
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1