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

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

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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 можно реализовать "ленивую загрузку". Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе "Ваши предложения". А на сегодня - все. Пока!

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

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

  1. Михаил

    Благодарю, это я спрашивал.

    • dimadv7

      Ну надеюсь получилось, и это то, что нужно))

  2. Михаил

    Столкнулся с проблемой. Когда список заканчивается, то надпись «Показать еще…» не исчезает. Если ее нажать еще раз, то выскакивает сообщение «К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу.» (в образце так же). Можно ли как-то с этим бороться?

  3. Михаил

    А нет, теперь разобрался. Последний файл должен быть пустым. Тогда появляется надпись «Портфолио полностью загружено». Но все таки, нельзя ли сделать так, чтобы просто ничего не появлялось на последнем файле?

  4. Михаил

    Вот если бы кнопку «Показать еще…» вложить в каждый последующий файл, а в последний не вкладывать. Но тогда, наверное, работать не будет.

  5. Михаил

    Или бы переписать скрипт так, чтобы можно было вручную устанавливать количество страниц. По алгоритму: если номер страницы = 5, то не показывать кнопку «Показать еще…». Но я сам не осилю подобное программирование.

  6. Майя Твоя обувь

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

  7. Павел

    Я пробовал вставить Ваш код. И на загруженные файлы на открываются в модальном окне + паралакас который ниже не работает((

    • Евгения

      Не твой день, у всех работает. Блин, пиши подробнее, если хочешь, чтобы тебе помогли. Есть ли ошибки в консоли? Если да — исправь их сначала.

  8. Alisa

    Как сделать чтобы при прокрутке до конца странички автоматом переходило на следующую? Спасибо за ваше время!

    Alisa @ __www.dogica.com

    • dimadv7

      Это далеко от темы landding page. С подобными вещами на многостраничных сайтах не разбирался.

Добавить комментарий