"Ленивая загрузка" контента на лендинге

Всем привет. Сегодня хочу поговорить с вами о том, как организовать "ленивую загрузку" контента на посадочных страницах.

Часто, ее еще называют "бесконечной прокруткой". Наверняка вы видели подобный эффект, когда контент изначально не присутствует на сайте, а по мере прокрутки страницы он плавно подгружается.

Давненько уже написали в раздел "Ваши предложения", с просьбой написать статью о том, как реализовать такой эффект:

Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим...

Ленивая загрузка контента

Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке "Показать еще". Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.

Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:

<div class="mainWrapper">
        <h1>Портфолио</h1>
        <div id="smartPortfolio">
            <div class="ourWork">
                <img src="./img/ico1.png" alt="Первый набор иконок">
            </div>
            <div class="ourWork">
                <img src="./img/ico2.png" alt="Второй набор иконок">
            </div>
        </div>
        <div id="moreButton" onclick="lazyload.load()">
            <span>Показать еще...</span>
        </div>
        <div id="loadingDiv">
            <span>Загрузка данных</span>
        </div>
</div>

Как видите, все - просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id="smartPortfolio", id="moreButton" и id="loadingDiv", так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio - это "контейнер" для нашего портфолио. MoreButton - это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv - область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.

Например, часть из читателей все равно будет пытаться тестировать этот скрипт не на сервере, а просто откроют индексный файл в браузере. В таком случае они увидят сообщение об ошибке. Кроме того, при совсем медленном соединении, на загрузку файлов может понадобиться время, и чтобы пользователь понимал, что процесс идет, можно вписать туда сообщение, что идет загрузка данных или поместить прелоадер (картинку, индикатор прогресса или еще что-то).

Сам скрипт я не писал, а нашел на одном из сайтов, автор указан в исходнике, кому интересно - посмотрите. Так как он не слишком большого размера, то приведу его весь, но если вы планируете использовать такие же названия айдишников и пути к файлам, как у меня, то можете даже не заглядывать в него, а просто подключить перед закрывающимся тегом body (в футере).

Для тех, кто планирует вносить правки вот сам скрипт:

var lazyload = lazyload || {};

(function($, lazyload) {

    "use strict";

    var page = 2,
        buttonId = "#moreButton",
        loadingId = "#loadingDiv",
        container = "#smartPortfolio";

    lazyload.load = function() {

        var url = "./pages/" + page + ".html";

        $(buttonId).hide();
        $(loadingId).show();

        $.ajax({
            url: url,
            success: function(response) {
                if (!response || response.trim() == "NONE") {
                    $(buttonId).fadeOut();
                    $(loadingId).text("Портфолио полностью загружено");
                    return;
                }
                appendContests(response);
            },
            error: function(response) {
                $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу.");
            }
        });
    };

    var appendContests = function(response) {
        var id = $(buttonId);

        $(buttonId).show();
        $(loadingId).hide();

        $(response).appendTo($(container));
        page += 1;
    };

})(jQuery, lazyload);

Итак, теперь стоит поговорить о тех файлах, из которых мы будем подгружать информацию. Скрипт предполагает, что это будут файла с именами 2.html...5.html и т.д. В которых лежит наша информация. Например, у меня первым подгружается файл 2.html и он имеет такое содержимое:

<div class="ourWork">
    <img src="./img/ico3.png" alt="третий набор иконок">
</div>

В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний - пустой. Это предполагает логика скрипта.

Путь в скрипте указан следующим образом:

var url = "./pages/" + page + ".html";

Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:

 buttonId = "#moreButton",
 loadingId = "#loadingDiv",
 container = "#smartPortfolio";

И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:

<script type="text/javascript" src="./js/lazyload.js"></script>

Вот так на landing page можно реализовать "ленивую загрузку". Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе "Ваши предложения". А на сегодня - все. Пока!

Скачать исходник