Smartlanding

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

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

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

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

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

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

ленивая загрузка изображений
Как и в большинстве случаев, начинаем с того, что подключаем библиотеку 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 можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!

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

Поделитесь статьей в социальных сетях, чтобы не потерять

13 комментариев

  • Михаил

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

    Ответить
  • dimadv7

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

    Ответить
  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • Майя Твоя обувь

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

    Ответить
  • Павел

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

    Ответить
  • Евгения

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

    Ответить
  • Alisa

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

    Alisa @ __www.dogica.com

    Ответить
  • dimadv7

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

    Ответить
  • Николай

    хей бро, поставь в стили td.gutter *{user-select: none} а то неудобно инфу выделять, ну или пост-обработка то что копируется

    Ответить
  • Виталий

    var id = $(buttonId); — что делает эта переменная в коде?

    Ответить

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