Простой Lazy Load в блоге на Egea

Реализация лэзи лоад, который скорее предназначен для визуального эффекта и который может быть будет применим в Эгее


Как-то игрался с Эгеей и решил реализовать что-то наподобие Infinity Scroll в основной ленте и ленте тегов. Фишка в чем? В том, чтобы не вываливать весь бесконечный контент постов для каждой страницы блога, а аккуратно подгружать при скролле по одной заметке. Но описанный здесь вариант не будет идеальным, потому что изначально все посты для каждой страницы отрендерятся, а мы их незаметно для пользователя тут же выпилим средствами css и подгрузим на js, этакий визуальный хак (на мгновение можно будет наблюдать только как вертикальная полоска скролла увеличится, что говорит о том, что изначально контент сгенерировался, но дальше этот момент мы также ликвидируем). По идее все новости надо разбивать на части (как при постраничной навигации), а потом уже подгружать их AJAXом (чтобы изначально сгенерировалась только порция контента, а потом уже подтягивались остальные), но тут сделано по другому. Изначально я хотел сделать чтобы выводился анонс постов, но, автор движка дает ясную позицию по поводу «катов» в блоге позиция автора. И родился код простого лэзи лоадинга, который скорее предназначен для визуального эффекта и который может быть будет применим в Эгее, а не для демонстрации правильности концепции lazyLoad.

Файл шаблона

Идем править файл: /themes/plain/templates/layout.tmpl.php

Ищем вывод _T ('notes'); и оборачиваем наш список заметок в див:

echo '<div class="lazy-content">';
_T ('notes');
echo '</div>';

Диву врапперу класса content даем еще один класс default-content-my

Файл стилей

Идем в стили: /themes/plain/styles/main.css, дописываем в конец строки. Этим мы оставляем один пост на странице списка заметок, а остальные исчезают, чтобы потом появиться

.default-content-my .lazy-content .e2-note {
    opacity: 0;
    display: none;
}

.default-content-my .lazy-content .e2-note:first-child {
    opacity: 1;
    display: block;
}

Свойство display используем для того чтобы горизонтальный скролл не увеличивался при загрузке страницы (см. начало заметки), а прозрачность, для того чтобы потом сделать плавную анимацию появления элемента

Файл скрипта

Составляем js, записываем в файл lazy.go.js и подключаем все в том же шаблоне вывода layout.tmpl.php перед закрывающем тегом дива футер. Вот основной код:

function loadMyContent(el) {
    el.each(function (index, element) {
        if (obj.iterator === index) {
            $(element)
                .css({"background": "url('system/theme/images/spin.svg') no-repeat center top"})
                .html(obj.arr[obj.iterator])
                .show()
                .animate({"opacity": "1"}, speed, function () {
                    $(element).css({"background": "none"});
                });
        }
    });
    obj.iterator++;
}

var node = 'e2-note',
    elements = $('.' + node + ':not(.' + node + ':first-child)'),
    speed = 750,
    obj = {
        iterator: 0,
        arr: []
    };

// вырезаем контент новостей и записываем его
elements.each(function () {
    var arr = [],
        $content = $(this).html();
    arr.push($content);
    $(this)
        .css({"position": "relative"})
        .html('');
    obj.arr.push(arr);
});

// при загрузке страницы, когда скролл в самом низу, или контент свежей новости мал и скролла нет
if (Math.round($(window).scrollTop(), 0) === $(document).height() - $(window).height()) {
    loadMyContent(elements);
}

// при скролле
$(window).on('scroll', function () {
    if (Math.round($(window).scrollTop(), 0) === $(document).height() - $(window).height()) {
        loadMyContent(elements);
    }
});

P.S. : Спасибо автору за двиг, но лично мое мнение по поводу кат таково: было бы отличным решением сделать возможность публикации аноносов заметок со ссылкой "Читать далее", но чтобы эта ссылка выводила полный контент текущей заметки без перезагрузки страницы.

P.S.S. : Если мне будет не лень, то может сделаю это сам на js, а код выложу в этом блоге.



Похожие заметки:

Многогранный front-end. Адаптивная верстка и флексбоксы

Приемы верстки с использованием flexbox, легкое выравнивание элементов в два клика. В заметке рассказывается про адаптивную верстку, а также как без использования готового css фреймворка сделать свой адаптивный шаблон, на примере 2-колоночного макета с правой колонкой, шапкой и подвалом

Открыть здесь

Dropdown меню на CSS

Пример и реализация выпадающего меню на css

Открыть здесь

Индивидуальная страница настроек в админке WordPress

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

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии