Jquery подгрузка при прокрутке: Подгрузка контента при прокрутке (бесконечная лента)

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

Скажу честно — заразная вещь. Те, кто сидят на сайте вконтакте, понимают это прекрасно. Так что, если у вас новостной сайт, тогда этот способ загрузки постов просто «must have».

Если вы сделали все предыдущие шаги из поста и дошли до этого момента — тогда отлично, добавим некоторые изменения для шагов 1 и 3.

Во-первых, кнопка Загрузить ещё нам больше не понадобится, поэтому немного изменим HTML-код:

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
    <script>
    var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
    var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
    var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
    </script>
<?php endif; ?>

Во-вторых, стили CSS нам тоже больше не нужны, если вы их добавляли, можете напрочь удалить.

В-третьих, содержимое файла loadmore.js изменится и будет следующим:

jQuery(function($){
    $(window).scroll(function(){
        var bottomOffset = 2000; // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
        var data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        if( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')){
            $.ajax({
                url:ajaxurl,
                data:data,
                type:'POST',
                beforeSend: function( xhr){
                    $('body').addClass('loading');
                },
                success:function(data){
                    if( data ) { 
                        $('#true_loadmore').before(data);
                        $('body').removeClass('loading');
                        current_page++;
                    }
                }
            });
        }
    });
});

Файл functions.php (это шаги 2 и 4) мы оставляем без изменений.

Надеюсь, что не запутал вас. Если возникнут трудности или какие-то вопросы, вот вам видео:

А чуть ниже можете почитать комментарии.

Бесконечная прокрутка страницы с записями, средствами jQuery | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Разбивка контента на страницы с номерами является классической схемой пагинации, интуитивно понятной и привычной для пользователей. Однако, в последнее время все больше сайтов начинают «применять на практике» такой вид навигации по страницам как, Infinite Scroll (бесконечная прокрутка). Исключением не стали даже такие гиганты как Google, Facebook и ВКонтакте. Естественно у данного вида пагинации есть свои плюсы и минусы, но это уже другой разговор. В этом уроке мы рассмотрим, как можно реализовать подобную навигацию.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Как это работает?!

Да все очень просто, если пользователь уже прокрутил определенное количество записей и находится в нижней части страницы, то с небольшой задержкой подгружаются еще сообщения. Для этого с помощью $.post формируем POST запрос к странице загрузки данных из БД (.php файл), HTML структура записей формируется этом же файле. После чего, структурирование HTML разметкой данные возвращаются в скрипт и размещаются на странице.

Процесс определения положения пользователя на странице:

Вы наверняка заметили использование переменных, так сказать параметры плагина, о них немного позже. Функция AJAX запроса к PHP файлу getData(), выглядит следующим образом:

Файл AJAX.php

PHP сценарий запроса к БД и формирования структуры выходных сообщений может выглядеть любым приемлемым для Вас образом. Все что Вам нужно сделать, это взять некоторую информацию из базы данных MySQL на ваш выбор. Далее приведен очень простой ajax.php файл, который берет информацию из базы данных MySQL и отображает содержимое с названием и ссылкой.

Использование в качестве плагина

Для этого нужно найти в ИСХОДНИКАХ (ссылка в начале статьи), файлы javascript.js и если желаете стили style.css + должна быть подключена библиотека jQuery. Остается только определиться в какой DIV будут подгружаться данные и вызвать метод scrollPagination с указанием параметров:

Дополнение

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Ленивая загрузка изображений при прокрутке с использованием JavaScript

Ленивая загрузка изображений

4+ Лучшие плагины jQuery с бесконечной прокруткой (бесплатные и платные) | FormGet

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

Ну, это бесконечный свиток.

Сегодня мы составили отличный список из 4+ лучших плагинов jQuery с бесконечной прокруткой. Вы можете выбрать тот, который вам нужен, в соответствии с вашими личными предпочтениями и требованиями к сайту.

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

Это обычная функция в настоящее время, которую вы можете найти на многих сайтах, таких как — Facebook, Instagram, Twitter и других.

Эти плагины помогают вашим пользователям экономить время, выполнять прокрутку из окна и многое другое.

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

Бесконечная прокрутка также известна как бесконечная прокрутка и альтернатива разбивке по страницам . Именно поэтому мы предложили использовать плагины jQuery с бесконечной прокруткой.

Итак, давайте углубимся и узнаем больше о функциях и ценах каждого из плагинов.

Вы также можете прочитать эти блоги:

1.Ленивый загрузчик — платный плагин jQuery с бесконечной прокруткой

Lazy Loader — один из лучших плагинов jQuery с бесконечной прокруткой премиум-класса. Он позволяет отображать элементы из файла JSON или базы данных на веб-сайте.

Этот плагин идеально подходит для отображения длинного содержимого страниц, например блога, изображений раздела галереи. Он включает такие файлы, как JavaScript JS, JavaScript JSON, HTML, CSS, PHP.

ЦЕНА:

• Этот плагин поставляется с обычным тарифным планом за 9 долларов с пожизненными обновлениями и 6-месячной поддержкой клиентов.
• Чтобы расширить его возможности, вы можете заплатить 40 долларов.

ОСОБЕННОСТИ:

• Этот плагин позволяет загружать только один элемент за один раз, другие не загружаются, пока пользователь не прокрутит их или не нажмет кнопку.
• Это помогает вам выбрать количество элементов для прокрутки на веб-сайте.
• Lazy Loader совместим с другим плагином, таким как Isotope, который помогает отображать фильтры и сортировать макеты.
• Его кросс-браузер, совместимый с IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge.

Нажмите здесь, чтобы узнать больше об этом плагине

2. jScroll — часть подключаемых модулей jQuery с бесконечной прокруткой

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

jScroll имеет возможность загружать контент с помощью AJAX на текущей странице или в области контента, где вы прокручиваете вниз. Он хорошо документирован, что поможет вам лучше понять его функциональность.

ЦЕНА:

jScroll jQuery — бесплатный плагин с открытым исходным кодом.

ОСОБЕННОСТИ:

• С помощью этого плагина вы можете включить режим отладки на веб-сайте, чтобы в случае возникновения какой-либо ошибки он автоматически распознавал ее.
• Вы можете установить целочисленное значение больше 0, чтобы отключить автоматический запуск страниц после каждого указанного количества страниц.
• Это HTML-код «loadingHtml (‘ Loading… ’)», который должен быть написан внизу страницы contnet при загрузке следующей.
• Вы можете определить функцию обратного вызова, которая будет вызываться после загрузки содержимого страницы.

Нажмите здесь, чтобы узнать больше об этом плагине

3.

Этот плагин очень прост и удобен в использовании. У него есть много вариантов функции обратного вызова, таких как — ondataloading, onDataLoaded и onDataError. Все эти функции обратного вызова будут выполняться по-разному, в зависимости от требований страницы.

Также есть два разных варианта — dataPath и itemSelector. Datapath помогает загружать больше данных из URL-адреса, тогда как itemselector помогает выбрать один селектор элементов для первоначальной загрузки элементов данных через AJAX.

ЦЕНА:

Вы можете бесплатно скачать этот плагин с официального сайта GitHub.

ОСОБЕННОСТИ:

• Этот плагин обращается к AJAX для загрузки дополнительных данных на веб-страницу.
• Он имеет функцию обратного вызова onDataLoaded, она вызывается всякий раз, когда загружаются дополнительные элементы данных.
• onDataError — это функция обратного вызова, которая вызывается всякий раз, когда возникает ошибка при загрузке данных через AJAX.

Нажмите здесь, чтобы узнать больше об этом плагине

Как правило, у нас есть большой объем контента для представления, но мы не можем загрузить все содержимое страницы сразу.Кроме того, этот плагин jQuery Infinite Scroll помогает использовать вызов AJAX для загрузки дополнительных данных на страницы.

Это очень простой и легкий в использовании плагин jQuery. Вы можете активировать его на своем веб-сайте всего несколькими щелчками мыши. Он также дает вам некоторые из основных обратных вызовов, например, начало загрузки данных.

ЦЕНА:

Это плагин jQuery с открытым исходным кодом, который можно легко загрузить с Github.

ОСОБЕННОСТИ:

• Вы можете выбирать элементы с помощью изначально загруженной опции селектора элементов или с помощью AJAX.
• Его onDataLoading является функцией обратного вызова всякий раз, когда вызывается загрузка дополнительных элементов данных.
• Более того, вы можете вызывать функцию onDataLoaded всякий раз, когда вы хотите, чтобы на страницы были загружены дополнительные элементы данных.
Функция
• onDataError помогает обнаружить ошибку на странице через AJAX.

Нажмите здесь, чтобы узнать больше об этом плагине

5. Infiniscroll — часть подключаемых модулей jQuery с бесконечной прокруткой

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

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

ЦЕНА:

Infiniscroll — это плагин jQuery с открытым исходным кодом, который легко доступен на GitHub.

ОСОБЕННОСТИ:

• Вы можете использовать ‘.pagination a.next ’для изменения номеров страниц на сайте.
• Функция ScrollOnLoadDistance — это расстояние для прокрутки вниз всякий раз, когда загружается новый контент по умолчанию, тогда установлен предел 200.
• Функция scrollOnLoadSpeed ​​используется для просмотра скорости прокрутки вниз, когда на странице загружается новый контент, по умолчанию это 500.
• Также этот плагин кроссбраузерно совместим с Opera Mini, Chrome, FireFox и т. Д.

Нажмите здесь, чтобы узнать больше об этом плагине

Заключение —

Это были лучшие подобранные вручную плагины jQuery с бесконечной прокруткой для вас.Мы надеемся, что вы нашли лучшее, что соответствует вашим требованиям.

Итак, чего вы ждете? Выберите тот, который использует его, и превратите свою веб-страницу в бесконечную страницу.

Не забудьте поделиться своими словами в нашем разделе комментариев!

отложенных загрузок изображений — полное руководство

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

Согласно последним данным HTTP-архива, средний размер страницы на настольных компьютерах составляет 1511 КБ. Изображения составляют почти 650 КБ этого размера, примерно 45% от общего размера страницы. Теперь, поскольку мы не можем отказаться от изображений, нам нужно сделать так, чтобы наши веб-страницы загружались с ними быстрее.

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

Получите это руководство в виде электронной книги. Прямо в ваш почтовый ящик!

Содержание

Что такое отложенная загрузка изображений?

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

Вот небольшой видеоролик, который поможет вам лучше понять:

Слово «ленивый» в английском языке часто приписывают как можно дольше избегать работы.

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

Технику отложенной загрузки можно применить практически ко всем ресурсам на странице. Например, в одностраничном приложении, если файл JS понадобится позже, лучше не загружать его изначально. Если изображение не требуется заранее, загрузите его позже, когда его действительно нужно будет просмотреть.

Зачем вообще нужна отложенная загрузка изображений?

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

Он имеет два основных преимущества.

1. Повышение производительности

Это самый важный шаг для вас как администратора веб-сайта — повышение производительности и времени загрузки.

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

2. Снижение затрат

Второе преимущество для вас заключается в расходах на доставку. Доставка изображения или доставка любого другого актива обычно взимается на основе количества переданных байтов.

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

Какие образы можно загружать лениво?

Основная идея отложенной загрузки проста — отложить загрузку всего, что сейчас не нужно. Для изображений это обычно означает, что любое изображение, которое не видно пользователю, может быть загружено лениво.

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

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

Ленивая загрузка важна не только для хорошей производительности, но и для удобства пользователей.

Приемы отложенной загрузки изображений

Изображения на веб-странице можно загружать двумя способами — с помощью тега или с помощью свойства CSS `background`. Давайте сначала рассмотрим более распространенный из двух тегов, , а затем перейдем к фоновым изображениям CSS.

Общая концепция отложенной загрузки изображений в теге

Ленивая загрузка изображений может быть разбита на два этапа:

Шаг первый — предотвратить загрузку изображений заранее.Для изображений, загруженных с использованием тега , браузер использует атрибут src тега для запуска загрузки изображения. Независимо от того, является ли это 1-м или 1000-м изображением в вашем HTML и находится вне экрана, если браузер получит атрибут src , это вызовет загрузку изображения.

Таким образом, чтобы отложить загрузку таких изображений, поместите URL-адрес изображения в атрибут, отличный от src . Допустим, мы указываем URL изображения в атрибуте data-src тега изображения.Теперь, когда src пуст, браузер не запускает загрузку изображения

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

Для этого мы проверяем, что как только изображение (то есть его заполнитель) попадает в область просмотра, мы запускаем загрузку.

Чтобы проверить, когда изображение попадает в область просмотра, есть два способа:

Запускать загрузку изображения с помощью событий Javascript

В этом методе мы используем прослушиватели событий на прокрутке , , изменения размера, и ориентации Изменить события браузер.Событие прокрутки — очевидное событие для проверки, когда пользователь прокручивает страницу. События resize и directionChange одинаково важны для отложенной загрузки. Событие изменения размера происходит при изменении размера окна браузера. Событие ориентацииChange запускается, когда устройство поворачивается из ландшафтного в портретный режим или наоборот. В таких случаях количество изображений, которые становятся видимыми на экране, изменится. Следовательно, нам нужно активировать загрузку этих изображений.

Когда происходит какое-либо из этих событий, мы находим все изображения на странице, которые должны быть загружены лениво и еще не загружены.По этим изображениям мы проверяем, какие из них сейчас находятся во вьюпорте. Это делается с помощью смещения верхнего края изображения, верхнего края прокрутки текущего документа и высоты окна. Если он вошел в область просмотра, мы выбираем URL-адрес из атрибута data-src и помещаем его в атрибут src . Это вызывает загрузку изображения. Мы также удаляем класс lazy , который определяет изображения, которые нужно отложить загружать для событий, которые запускаются позже. Как только все изображения загружены, мы удаляем прослушиватели событий.

Когда мы прокручиваем, событие прокрутки срабатывает несколько раз быстро. Таким образом, для повышения производительности мы добавляем небольшой тайм-аут, который ограничивает выполнение функции отложенной загрузки.

Вот рабочий пример такого подхода.

Если вы заметили, первые 3 изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте src вместо атрибута data-src . Это важно для хорошего взаимодействия с пользователем. Поскольку эти изображения находятся вверху страницы, их следует сделать видимыми как можно скорее.Мы не должны ждать, пока событие или выполнение JS загрузят их.

Использование Intersection Observer API для запуска загрузки изображений

Intersection Observer API — это относительно новый API в браузерах. Это позволяет очень просто определить, когда элемент входит в область просмотра, и предпринять действия, когда это произойдет. В предыдущем методе нам нужно было привязать события, учитывать производительность и реализовать способ вычисления, был ли элемент в области просмотра или нет. API-интерфейс Intersection Observer делает это действительно простым, помогает избежать математических вычислений и обеспечивает отличную производительность.

Пример использования Intersection Observer API для ленивой загрузки изображений:

Мы прикрепляем наблюдателя ко всем изображениям для ленивой загрузки. Как только API обнаруживает, что элемент вошел в область просмотра, используя свойство isIntersecting , мы выбираем URL-адрес из атрибута data-src и перемещаем его в атрибут src , чтобы браузер запускал загрузку изображения. Как только это будет сделано, мы удаляем ленивый класс из изображения, а также удаляем наблюдателя из этого изображения.

Если вы сравните время, затраченное на загрузку изображения в обоих методах, прослушивателях событий и Intersection Observer, вы обнаружите, что при использовании Intersection Observer API загрузка изображения запускается намного быстрее, и все же сайт не выглядит вялым при прокрутке. В методе, включающем прослушиватели событий, нам пришлось добавить тайм-аут, чтобы сделать его работоспособным, что оказывает незначительное влияние на взаимодействие с пользователем, поскольку загрузка изображения запускается с небольшой задержкой.

Однако поддержка Intersection Observer API доступна не во всех браузерах.Следовательно, нам нужно вернуться к методу прослушивателя событий в браузерах, где API-интерфейс Intersection Observer не поддерживается. Мы учли это в приведенном выше примере.

Native Lazy Loading

В своем последнем обновлении Google добавил поддержку собственной отложенной загрузки в последней версии браузера Chrome — Chrome 76. Все браузеры на основе Chromium, то есть Chrome, Edge и Safari, а также Firefox. Вы можете найти более подробную информацию о поддержке браузером нативной отложенной загрузки на caniuse.com.

Теперь, когда в игру вступает поддержка со стороны браузера, разработчикам нужно только добавить атрибут «загрузка» при встраивании изображений, чтобы реализовать отложенную загрузку на своих веб-сайтах.

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

Итак, код теперь будет выглядеть так —

Атрибут загрузки поддерживает следующие значения:

• lazy — Отсрочка загрузки ресурсов до достижения определенное расстояние от области просмотра.
• нетерпеливый — загрузка ресурсов сразу после загрузки страницы, независимо от того, где они размещены на странице, выше или ниже сгиба страницы.
• авто — Это значение запускает отложенную загрузку по умолчанию.По сути, это то же самое, что не включать атрибут загрузки.

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

Как описано далее в этом блоге, чтобы предотвратить переформатирование окружающего контента при загрузке лениво загруженного изображения, обязательно добавьте атрибуты height и width к элементу или укажите их значения напрямую. во встроенном стиле:

Получите это руководство в виде электронной книги. Прямо в ваш почтовый ящик!

Ленивая загрузка фоновых изображений CSS

После тегов фоновые изображения являются наиболее распространенным способом загрузки изображений на веб-страницу. Для тегов браузер использует очень простой подход — если URL изображения доступен, давайте загрузим изображение.

С фоновыми изображениями CSS все не так просто.Чтобы загрузить фоновые изображения CSS, браузеру необходимо построить дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, браузер не загружает фоновое изображение. Если правило CSS применимо к элементу в текущем документе, браузер загружает изображение.

Сначала это может показаться сложным, но такое же поведение лежит в основе техники отложенной загрузки фоновых изображений.Проще говоря, мы обманываем браузер, заставляя его не применять свойство CSS фонового изображения к элементу до тех пор, пока этот элемент не попадет в область просмотра.

Вот рабочий пример ленивой загрузки фонового изображения CSS.

Следует отметить, что код Javascript для отложенной загрузки остался прежним. Мы используем метод API Intersection Observer с откатом к слушателям событий. Уловка заключается в CSS.

Элемент с идентификатором bg-image имеет фоновое изображение , указанное в CSS.Однако, когда к этому элементу добавляется класс lazy , в CSS мы переопределяем свойство background-image и устанавливаем его значение none.

Поскольку правило, объединяющее # bg-image с .lazy класс имеет более высокий приоритет в CSS, чем просто # bg-image , браузер изначально применяет свойство background-image: none к элементу . Когда мы прокручиваем вниз, Intersection Observer (или прослушиватели событий) обнаруживает, что изображение находится в области просмотра, и удаляет класс lazy .Это изменяет применимый CSS и применяет фактическое свойство background-image к элементу, запускающему загрузку фонового изображения.

Лучшее взаимодействие с пользователем с отложенной загрузкой изображений

Ленивая загрузка дает большое преимущество в производительности. Для компании электронной коммерции, которая загружает сотни изображений продуктов на страницу, отложенная загрузка может обеспечить значительное сокращение времени начальной загрузки страницы при одновременном снижении потребления полосы пропускания.

Тем не менее, многие компании не выбирают ленивую загрузку, потому что считают, что это противоречит обеспечению хорошего пользовательского опыта, цитируя такие причины, как «начальный заполнитель некрасивый», «время загрузки медленное» и т. Д.

Как мы можем решить такие проблемы, связанные с пользовательским интерфейсом, с отложенной загрузкой изображений?

1. Использование правильных заполнителей изображения

Заполнитель — это то, что отображается в контейнере до загрузки фактического изображения. Обычно мы видим, что разработчики используют заполнитель сплошного цвета для изображений или одно изображение в качестве заполнителя для всех изображений.

Мы использовали то же самое в нашем примере кода. Сплошной светло-серый цвет используется для всех фонов изображений. Тем не менее, мы можем сделать лучше, чтобы пользовательский интерфейс был более приятным.

Взгляните на некоторые примеры лучших заполнителей для наших изображений:

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

Этот метод уже довольно давно используется в результатах поиска изображений Google и Pinterest.

Пример изображения, взятого из Manu.ninja

Это может показаться сложным для достижения, но очень простой способ сделать это — сначала уменьшить изображение до 1×1 пикселя, а затем масштабировать его до размера заполнителя — очень грубое приближение, но простой способ без суеты получить единственный доминирующий цвет.

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

Пример URL-адреса изображения заполнителя доминирующего цвета с использованием ImageKit

Размер изображения заполнителя составляет всего 661 байт по сравнению с исходным изображением, которое 12700 байт, что делает его 19x меньше . И это обеспечивает более приятный переход от заполнителя к фактическому изображению.

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

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

Мы можем расширить вышеупомянутую идею использования заполнителя доминирующего цвета.

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

Эту технику использовали Facebook и Medium.com для изображений на своих веб-сайтах и ​​в приложениях.

Пример URL-адреса изображения LQIP с использованием ImageKit

Размер LQIP составляет 1300 байт, что почти в 10 раз меньше исходного изображения и является значительным улучшением визуального восприятия по сравнению с любым другим методом заполнителя.

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

Вы можете просмотреть рабочий пример и код для использования техники LQIP здесь.

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

2.Добавление некоторого времени буфера для загрузки изображения

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

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

Хотя использование Intersection Observers для загрузки изображения или использование заполнителей изображений низкого качества обеспечивает лучшую производительность загрузки и удобство для пользователя, есть еще один простой трюк, который вы можете использовать, чтобы гарантировать, что изображения всегда загружаются полностью, когда они входят в область просмотра — введение запас до точки срабатывания для изображений.

Решение
Вместо загрузки изображения, когда они точно входят в область просмотра, загружайте изображения, когда они, скажем, находятся на расстоянии 500 пикселей от входа в область просмотра.Это обеспечивает дополнительное время между триггером загрузки и фактическим входом в окно просмотра для загрузки изображений.

С помощью Intersection Observer API вы можете использовать параметр root вместе с параметром rootMargin (работает как стандартное правило полей CSS), чтобы увеличить эффективную ограничивающую рамку, которая считается находящей «пересечение».

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

В этом примере для загрузки изображений используется порог в 500 пикселей.

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

Если вы еще не заметили, во всех наших примерах третье изображение (image3.jpg) всегда загружается впереди, даже если он находится за пределами области просмотра. Это также было сделано по тому же принципу — загружать немного заранее, а не загружать точно на пороге для лучшего взаимодействия с пользователем.

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

3. Предотвращение смещения контента при отложенной загрузке

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

Проблема
Когда изображение отсутствует, браузер не знает размеров содержимого, которое должно отображаться во вложенном контейнере. И если мы не укажем его с помощью CSS, охватывающий контейнер не будет иметь размеров, то есть 0 x 0 пикселей. Итак, когда изображение загружается, браузер изменяет размер охватывающего контейнера, чтобы он соответствовал изображению.
Это внезапное изменение макета заставляет другие элементы перемещаться, и это называется смещением содержимого. Как показано в этой статье и видео о перемещении контента из журнала Smashing Magazine, это довольно неприятный опыт для пользователя, поскольку контент внезапно перемещается при загрузке изображения.

Решение
Этого можно избежать, указав высоту и / или ширину для вашего включающего контейнера, чтобы браузер мог раскрасить контейнер изображения с известной высотой и шириной.Позже, когда изображение загружается, поскольку размер контейнера уже указан и изображение идеально вписывается в него, остальное содержимое вокруг контейнера остается на месте.

4. Не ленитесь загружать все изображения

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

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

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

Кроме того, поскольку мобильные и настольные устройства имеют разные размеры экрана, они будут иметь разное количество изображений, которые будут отображаться на экране изначально.Таким образом, вам необходимо принять во внимание тип устройства, чтобы решить, какие ресурсы загружать заранее, а какие — лениво.

b) Любое изображение, которое лишь немного выходит за пределы области просмотра, не должно загружаться лениво. Это основано на том, что обсуждалось ранее — загрузите немного заранее. Итак, скажем, любое изображение размером 500 пикселей или одиночная прокрутка снизу области просмотра также может быть загружена впереди.

c) Если страница не слишком длинная, может быть всего одна или две прокрутки, или если за пределами области просмотра меньше 5 изображений, то отложенной загрузки можно вообще избежать.

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

Javascript-зависимость отложенной загрузки

Вся идея отложенной загрузки зависит от доступности возможностей выполнения Javascript в браузере пользователя. Хотя нативная отложенная загрузка обещает удалить эту зависимость, при том, что поддержка браузером все еще близка к 70%, если вы хотите обеспечить одинаковый опыт во всех браузерах, вам все равно придется использовать библиотеки JS.

Хотя у большинства ваших пользователей в браузере будет разрешено выполнение Javascript, поскольку в наши дни это важно почти для всех веб-сайтов, вы можете запланировать для пользователей, которые не разрешают выполнение javascript, или используют браузер, не поддерживающий javascript. вообще.

Вы можете показать им сообщение о том, почему изображения не загружаются и что им нужно переключиться на современный браузер, или включить Javascript. Или вы можете использовать тег noscript для создания удобного интерфейса для этих пользователей.Использование тега

Эта ветка на Stack Overflow отлично справляется с этими проблемами, и ее рекомендуется прочитать всем, кто хочет обратиться к этой группе пользователей.

Популярные библиотеки Javascript для отложенной загрузки на вашем веб-сайте

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

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

yall.js (еще один ленивый загрузчик)

• Использует Intersection Observer и возвращается к отложенной загрузке на основе событий.
• Поддерживает все основные типы элементов HTML, но не фоновые изображения.
• Также работает с IE11 +.

lazysizes

• Очень популярный и обширный функционал.
• Также поддерживает атрибут srcset и размеры адаптивных изображений.
• Высокая производительность даже без наблюдателя перекрестков.

jQuery Lazy

• Простая библиотека отложенной загрузки на основе jquery.

WeltPixel Lazy Loading Enhanced

• Расширение Magento 2 для отложенной загрузки изображений.

Magento Lazy Image Loader

• Расширение Magento 1.x для отложенной загрузки изображений.

Shopify Плагин Lazy Image

• Расширение Shopify для отложенной загрузки изображений.
• Зато платно.

WordPress A3 Lazy Load

• Плагин отложенной загрузки изображений для WordPress.

Как проверить, работает ли ленивая загрузка?

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

Перейдите на вкладку «Сеть»> «Изображения».

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

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

Другой способ — запустить отчет аудита Google Chrome Lighthouse на своей странице после того, как вы внедрили изменения, и поищите предложения в разделе «Неэкранные изображения».

Заключение

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

Итак, чего вы ждете? Начните с отложенной загрузки изображений прямо сейчас!

Вы оптимизируете изображения своего веб-сайта? Нет? Начните работу с CDN изображений и инструментом оптимизации ImageKit бесплатно прямо сейчас!

Пять способов отложенной загрузки изображений для повышения производительности веб-сайта

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

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

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

Что такое отложенная загрузка?

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

Ряд веб-сайтов используют этот подход, но он особенно заметен на сайтах с большим количеством изображений. Попробуйте поискать фотографии в высоком разрешении в своем любимом онлайн-охотничьем угодье, и вскоре вы поймете, что веб-сайт загружает лишь ограниченное количество изображений.Прокручивая страницу вниз, вы увидите, что изображения-заполнители быстро заполняются реальными изображениями для предварительного просмотра. Например, обратите внимание на загрузчик на Unsplash.com: прокрутка этой части страницы для просмотра вызывает замену заполнителя фотографией в полном разрешении:

Почему вам следует заботиться о отложенной загрузке изображений?

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

• Если ваш веб-сайт использует JavaScript для отображения контента или предоставления пользователям каких-либо функций, загрузка DOM быстро становится критически важной.Скрипты обычно ждут, пока DOM полностью загрузится, прежде чем начать работу. На сайте со значительным количеством изображений отложенная загрузка — или загрузка изображений асинхронно — может иметь значение, остаются ли пользователи на вашем сайте или покидают его.
• Поскольку большинство решений для отложенной загрузки работают, загружая изображения только в том случае, если пользователь прокрутил страницу до места, где изображения будут видны внутри области просмотра, эти изображения никогда не будут загружены, если пользователи никогда не дойдут до этой точки.Это означает значительную экономию полосы пропускания, за что вас поблагодарит большинство пользователей, особенно те, которые выходят в Интернет с мобильных устройств и имеют медленное соединение.

Что ж, отложенная загрузка изображений помогает повысить производительность веб-сайта, но как лучше всего это сделать?

Нет идеального пути.

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

Кроме того, вы можете поискать в Интернете жизнеспособные подходы и начать с ними экспериментировать. Я так и сделал и наткнулся на эти пять интересных приемов.

# 1 Собственная отложенная загрузка

Встроенная отложенная загрузка изображений и фреймов — это супер круто. Ничего не может быть проще, чем разметка ниже:

Как видите, без JavaScript, без динамической замены значения атрибута src , просто старый добрый HTML.

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

• lazy : отлично работает для отложенной загрузки
• нетерпеливый : указывает браузеру сразу загрузить указанный контент
• auto : оставляет браузеру возможность ленивой загрузки или не ленивой загрузки.

У этого метода нет конкурентов: у него нулевые накладные расходы, он чистый и простой.Однако, хотя на момент написания статьи большинство основных браузеров хорошо поддерживали атрибут загрузка , не все браузеры еще поддерживаются.

Для получения подробной статьи об этой замечательной функции отложенной загрузки изображений, включая обходные пути поддержки браузера, не пропустите статью Адди Османи «Нативная отложенная загрузка изображений для Интернета!».

# 2 Ленивая загрузка с использованием API-интерфейса Intersection Observer

Intersection Observer API — это современный интерфейс, который можно использовать для отложенной загрузки изображений и другого контента.

Вот как MDN представляет этот API:

API-интерфейс Intersection Observer обеспечивает способ асинхронного наблюдения за изменениями пересечения целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.

Другими словами, асинхронно просматривается пересечение одного элемента с другим.

У Дениса Мишунова есть отличное руководство как по Intersection Observer, так и по отложенной загрузке изображений с его помощью.Вот как выглядит его решение.

Допустим, вы хотите отложить загрузку галереи изображений. Разметка для каждого изображения будет выглядеть так:

Обратите внимание, что путь к изображению содержится внутри атрибута data-src , а не атрибута src . Причина в том, что использование src означает, что изображение загрузится сразу, а это не то, что вам нужно.

В CSS вы присваиваете каждому изображению значение min-height , скажем, 100 пикселей .Это дает каждому заполнителю изображения (элемент img без атрибута src) вертикальный размер:

  img {
  минимальная высота: 100 пикселей;
  
}
  

Затем в документе JavaScript вы создаете объект конфигурации и регистрируете его в экземпляре correctionObserver :

 

const config = {
  rootMargin: '0px 0px 50px 0px',
  порог: 0
};



let Observer = new intersectionObserver (function (entries, self) {
  
  entry.forEach (entry => {
    
    
    если (запись.isIntersecting) {
      
      
      preloadImage (entry.target);
      
      self.unobserve (entry.target);
    }
  });
}, config);
  

Наконец, вы перебираете все свои изображения и добавляете их в этот экземпляр iterationObserver :

  const imgs = document.querySelectorAll ('[data-src]');
imgs.forEach (img => {
  Observer.observe (img);
});
  

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

С другой стороны, хотя API-интерфейс Intersection Observer поддерживается большинством браузеров в их последних версиях, он не поддерживается всеми из них на постоянной основе. К счастью, есть полифилл.

Вы можете узнать больше об API-интерфейсе Intersection Observer, а также об этой реализации в статье Дениса.

# 3 Lozad.js

Быстрая и простая альтернатива реализации отложенной загрузки изображений — позволить библиотеке JS выполнять большую часть работы за вас.

Lozad — это высокопроизводительный, легкий и настраиваемый ленивый загрузчик на чистом JavaScript без зависимостей.Вы можете использовать его для отложенной загрузки изображений, видео, фреймов и многого другого, и он использует API-интерфейс Intersection Observer.

Вы можете включить Lozad с npm / Yarn и импортировать его с помощью выбранного вами сборщика модулей:

  npm install --save lozad

пряжа добавить лозад
  

  импортный лозад из «лозад»;
  

В качестве альтернативы вы можете просто загрузить библиотеку с помощью CDN и добавить ее в нижнюю часть HTML-страницы в теге

Затем для базовой реализации добавьте класс lozad к активу в вашей разметке:

Наконец, создайте экземпляр Lozad в своем JS-документе:

  const наблюдатель = lozad ();
Observer.observe ();
  

Вы найдете все подробности о том, как использовать библиотеку, в репозитории Lozad на GitHub.

Если вы не хотите углубляться в работу Intersection Observer API или просто ищете быструю реализацию, которая применима к различным типам контента, Lozad - отличный выбор.

, помните о поддержке браузером и в конечном итоге интегрируйте эту библиотеку с полифилом для Intersection Observer API.

# 4 Ленивая загрузка с эффектом размытого изображения

Если вы читаете Medium, то наверняка заметили, как сайт загружает основное изображение в сообщение.

Первое, что вы видите, - это размытая копия изображения с низким разрешением, в то время как его версия с высоким разрешением загружается лениво:

Вы можете отложить загрузку изображений с этим интересным эффектом размытия несколькими способами.

Моя любимая техника Крейга Баклера. Вот и все достоинства этого решения:

• Производительность: всего 463 байта CSS и 1007 байтов минимизированного кода JavaScript
• Поддержка экранов Retina
• Без зависимостей: не требуется jQuery или других библиотек и фреймворков
• Постепенно улучшено для противодействия устаревшим браузерам и сбоям JavaScript

Вы можете прочитать все об этом в статье «Как создать собственный прогрессивный загрузчик изображений» и загрузить код из репозитория проекта на GitHub.

# 5 Yall.js

Yall - это многофункциональный сценарий отложенной загрузки изображений, видео и окон iframe. В частности, он использует API-интерфейс Intersection Observer и при необходимости использует традиционные методы обработки событий.

При включении Yall в документ его необходимо инициализировать следующим образом:

  
<сценарий>
  document.addEventListener ("DOMContentLoaded", yall);

  

Затем, чтобы лениво загрузить простой элемент img , все, что вам нужно сделать в разметке, это:

Обратите внимание на следующее:

• вы добавляете класс lazy к элементу
• значение src является изображением-заполнителем
• путь к изображению, которое вы хотите отложить, находится внутри атрибута data-src

Среди преимуществ Yall:

• отличная производительность с Intersection Observer API
• фантастическая поддержка браузеров (восходит к IE11)
• никакие другие зависимости не требуются

Чтобы узнать больше о том, что Yall может предложить, а также о более сложных реализациях, посетите страницу проекта на GitHub.

Заключение

Вот и все - пять способов отложенной загрузки изображений, с которыми вы можете начать экспериментировать и опробовать в своих проектах.

30+ jQuery Lazy Load Image & Content Plugin с демонстрационным примером

Обнаружение асинхронных границ - отложенная загрузка, бесконечная прокрутка и т. Д. Будь то ленивая загрузка изображений, реализация бесконечной прокрутки или уход от бывшего любовника важно установить границы.

yall.js - это многофункциональный сценарий отложенной загрузки для элементов , , и