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

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

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

<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 с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio — это «контейнер» для нашего портфолио. MoreButton — это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv — область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.

 

Сам скрипт выглядит следующим образом:

var lazyload = lazyload || {};

(function($, lazyload) {

    "use strict";

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

    lazyload.load = function() {

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

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

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

    var appendContests = function(response) {

        $(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";

Если нам нужно отлавливать события скроллинга до конца видимого контента, не дожидаясь пока пользователь нажмет на кнопку «загрузить еще», можно модернизировать скрипт (убирать кнопку, или оставить — на ваше усмотрение):

$(function() {

    var target = $('#moreButton');
    var targetPos = target.offset().top;
    var winHeight = $(window).height();
    var scrollToElem = targetPos - winHeight;

    $(window).scroll(function(){
        var winScrollTop = $(this).scrollTop();
        if(winScrollTop > scrollToElem){
            lazyload.load();
        }
    }); 
});

Ну, и сам скрипт: lazyload

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *