Разное

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

22.04.1970

Содержание

Подгрузка блоков в зависимостити от прокрутки страницы jQuery

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

Сразу скажу, что вариант, который я предлагаю работает на cherry.lazy-load.js без использования ajax подгрузки контента. Данный скрипт нужен для эффекта плавного появления блоков, который часто используется в лэндингах.

Как вы видите из демонстрации, скрипт способен отображать блоки с разной скоростью и временем задержки. Чтобы пример из архива заработал, распакуйте его и запустите index.html

Установка:

  1. В скачанном архиве подключаем на свой сайт файлы: lazy-load.css, cherry.lazy-load.js и jquery-1.9.1.min.js (если нет библиотеки jQuery).
  2. В блок, где нужен эффект ставим data-delay=»0″ data-speed=»400″. Именно по классу lazy-load-box скрипт понимает, что нужно добавить эффект планого появления на элементе.

Где:

  • data-delay — через сколько начать показывать блок (за счет этого можно грузить блоки по-очереди) в миллисек.
  • data-speed — скорость анимации в миллисек.
  • класс — можно совмещать с другими (своими) классами, просто подписав его в блоке

Важное замечание. Эффект cherry lazy-load может заменять стандартные css на свои если они прописаны напрямую в <style></style> тега — поэтому стили лучше добавлять в классы.

Используйте данный плагин на здоровье и пускай он сделает ваши сайты красивее.

Читайте также

blogprogram.ru | 2019-02-28 | Подгрузка блоков в зависимостити от прокрутки страницы jQuery | На многих сайтах можно увидеть красивые эффекты появления блоков, в зависимости от прокрутки мыши по странице. Их можно задавать на любой блок в сайте | http://blogprogram.ru/wp-content/uploads/2016/12/537-131×131.jpg

Drupal Views Infinite Scroll — подгрузка материалов при прокрутке страницы

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

Для того что бы добавить такую возможно на сайт нам понадобятся модули:

Модуль Views Infinite Scroll очень прост в настройке. Он устанавливается как плагин для Views и появляется в списке постраничных навигаторов представления.

Для того чтобы использовать модуль необходимо его активировать, после этого скачать js-библиотеку jquery.autopager и положить в папку модуля views_infinite_scroll/js либо воспользоваться drush-командой drush dl-autopager.

После этого можете настраивать свое представление. Абсолютно неважно какой тип контента оно выводит, ноды, таксономию, пользователей, pager можно применить к абсолютно всем сущностям, соответственно и Infinite Scroll тоже.

После включения модуля и загрузки jquery.autopager в настройках постраничного навигатора появится новый пункт Infinite scroll, после выбора которого мы увидим обычную форму настройки навигатора. В поле Элементов на страницу(Items per page) надо указать по сколько материалов представление будет подгружать за один раз.

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

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

Используемые модули и библиотеки:

Подгрузка постов на AJAX в WordPress, бесконечный скролл

Урок 4

В этом уроке я расскажу вам не только, как создать кнопку «Загрузить ещё» для постов на главной и в категориях, но мы также рассмотрим, как сделать загрузку постов при скролле и при этом сохраним пагинацию для SEO.

Чтобы скачать готовый код из этого урока, вам нужно купить курс.

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

Работать будем со стандартной темой TwentyTwentyOne, во-первых, эта тема довольно простая и будет нетрудно разобраться в коде, во-вторых, вы всегда можете установить её прямо из админки из репозитория тем WordPress.

Что мы попробуем сделать в этом посту?

  • Загрузку постов при нажатии на кнопку «Загрузить ещё».
  • Бесконечную загрузку, т е посты будут подгружаться автоматически при прокрутке страницы.
  • Сделаем так, чтобы подгрузка постов работала для рубрик, меток и любых архивов таксономий (только на видео).
  • Сделаем динамическую пагинацию, показывающую текущую страницу после подгрузки постов (только на видео).

Шаг 1. Добавление кнопки «Загрузить ещё»

Для начала нам надо найти файл, в котором добавляется постраничная навигация. В TwentyTwentyOne это два файла – index.php для главной страницы сайта, где выводятся посты блога и archive.php – для меток и рубрик.. Если вы не понимаете, в каком файле надо искать в вашей теме, рекомендую взглянуть на этот туториал.

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

Найдите соответствующее место в шаблоне за пределами цикла while, то есть после того, как заканчивается вывод постов (в TwentyTwentyOne это место практически сразу после endwhile) и вставляем туда код:

<div><a href="#">Загрузить ещё</a></div>

Понятно, нам нужно учесть некоторые моменты, чтобы кнопка отображалась корректно, а именно:

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

Это решается следующими условиями:

global $wp_query;
 
// текущая страница
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
// максимум страниц
$max_pages = $wp_query->max_num_pages;
 
// если текущая страница меньше, чем максимум страниц, то выводим кнопку
if( $paged < $max_pages ) {
	// тут выводим кнопку
}

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

global $wp_query;
 
// текущая страница
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
// максимум страниц
$max_pages = $wp_query->max_num_pages;
 
// если текущая страница меньше, чем максимум страниц, то выводим кнопку
if( $paged < $max_pages ) {
	echo '<div>
		<a href="#" data-max_pages="' . $max_pages . '" data-paged="' . $paged . '">Загрузить ещё</a>
	</div>';
}

Также на кнопку я добавил класс .button

, который стилизует её для темы TwentyTwentyOne.

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

Самый легкий шаг позади.

Шаг 2. Подключение скриптов

Документация функций wp_enqueue_script() и get_stylesheet_directory_uri() в помощь. Про подключение скриптов я писал часто и подробно, поэтому сейчас на этом останавливаться не будем, если есть проблемы — смотрите документацию. А этот код — в functions.php дочерней темы.

add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );
 
function true_loadmore_scripts() {
	wp_enqueue_script( 'jquery' ); // в TwentyTwentyOne он не подключен по умолчанию
 
 	wp_enqueue_script( 
		'true_loadmore', 
		get_stylesheet_directory_uri() . '/loadmore.js', 
		array( 'jquery' ),
		time() // не кэшируем файл, убираем эту строчку после завершение разработки
	);
}

Также нам понадобится передать в loadmore.js динамический адрес обработчика AJAX в WordPress, поэтому мы немного модифицируем наш код, добавив в него функцию wp_localize_script().

add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );
 
function true_loadmore_scripts() {
	wp_enqueue_script( 'jquery' ); // в TwentyTwentyOne он не подключен по умолчанию
 
 	wp_register_script( 
		'true_loadmore', 
		get_stylesheet_directory_uri() . '/loadmore.js', 
		array( 'jquery' ),
		time() // не кэшируем файл, убираем эту строчку после завершение разработки
	);
 
	wp_localize_script( 
		'true_loadmore', 
		'misha', 
		array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
	);
 
	wp_enqueue_script( 'true_loadmore' );
}

Шаг 3. Скрипт асинхронной загрузки

Вы ещё не создали файл loadmore.js в папке с темой? Давайте создадим его и добавим туда следующий код:

jQuery(function($){
 
	// определяем в переменные кнопку, текущую страницу и максимальное кол-во страниц
	var button = $( '#loadmore a' ),
	    paged = button.data( 'paged' ),
	    maxPages = button.data( 'max_pages' );
 
	button.click( function( event ) {
 
		event.preventDefault(); // предотвращаем клик по ссылке
 
		$.ajax({
			type : 'POST',
			url : misha.ajax_url, // получаем из wp_localize_script()
			data : {
				paged : paged, // номер текущей страниц
				action : 'loadmore' // экшен для wp_ajax_ и wp_ajax_nopriv_
			},
			beforeSend : function( xhr ) {
				button.text( 'Загружаем...' );
			},
			success : function( data ){
 
				paged++; // инкремент номера страницы
				button.parent().before( data );
				button.text( 'Загрузить ещё' );
 
				 // если последняя страница, то удаляем кнопку
				if( paged == maxPages ) {
					button.remove();
				}
 
			}
 
		});
 
	} );
});

Я постарался сделать этот код максимально простым, дополнительными переменными усложнять его не стал. Если вы хотя бы немного разбираетесь в jQuery, то у вас не возникнет с ним никаких проблем. Даже если не разбираетесь, но сделаете всё по инструкции, то всё тоже будет ок.

Шаг 4. Обработчик PHP, вывод постов

Этот код также отправляется в файл functions.php. Если он вам непонятен, читайте подробнее про циклы, WP_Query и query_posts().

add_action( 'wp_ajax_loadmore', 'true_loadmore' );
add_action( 'wp_ajax_nopriv_loadmore', 'true_loadmore' );
 
function true_loadmore() {
 
	$paged = ! empty( $_POST[ 'paged' ] ) ? $_POST[ 'paged' ] : 1;
	$paged++;
 
	$args = array(
		'paged' => $paged,
		'post_status' => 'publish'
	);
 
	query_posts( $args );
 
	while( have_posts() ) : the_post();
 
		get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
 
	endwhile;
 
	die;
 
}

Бесконечная загрузка постов при прокрутке страницы

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

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

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

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

jQuery(function($){
	$(window).scroll(function(){
		var bottomOffset = 2000,  // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
		    button = $( '#loadmore a' ),
		    paged = button.data( 'paged' ),
		    maxPages = button.data( 'max_pages' );
 
		if( $(document).scrollTop() &gt; ($(document).height() - bottomOffset) &amp;&amp; !$('body').hasClass('loading')){
			$.ajax({
				type : 'POST',
				url : misha.ajax_url,
				data : {
					paged : paged,
					action : 'loadmore' 
				},
				beforeSend: function( xhr){
					$('body').addClass('loading');
				},
				success:function(data){
					if( data ) {
						paged++;
						button.parent().before( data );
						$('body').removeClass('loading');
					}
				}
			});
		}
	});
});

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

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

Пагинация подробно рассмотрена на видеоуроке 🙂

Купить курс

2800 ₽

  • 7 видеоуроков
  • Доступ к теме курса с готовым кодом после каждого урока
  • Доступ навсегда
Ваш email будет использоваться только для регистрации на сайте. На него придёт письмо с логином и паролем. Войдите, если уже зарегистрированы.

подгрузка изображений jquery — video klip mp4 mp3

Video Axtar Ara Yukle Indir

Video


подгрузка изображений jquery — video klip mp4 mp3 yukle
Отложенная загрузка изображений Lazy Load. Правильная оптимизация

11:19

jQuery подгрузка контента без перезагрузки

7:55

Подгрузка картинок при прокрутке. Lazy load

16:33

Lazy Loading (ленивая загрузка). Объяснение и практические примеры на JavaScript. Атрибут loading.

36:12

Загрузка файлов на CSS и JS с нуля. JavaScript практика

1:33:03

Галерея изображений на jQuery как создать с нуля, урок 30

16:00

Загрузка файлов на сервер путем перетаскивания. Часть 1

21:43

Загрузка изображений. Библиотека DropzoneJS. Часть 1

34:49

24. Создание сайта на Node.js, Express, MongoDB | Загрузка картинок — часть 1

36:24

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

12:18

96 — ReactJS загрузка изображения, shouldComponentUpdate fix

43:26

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

8:42

Video Axtar Yüklə
Anarim.Az

Sayt Rehberliyi ile Elaqe

Saytdan Istifade Qaydalari

Anarim.Az 2004-2021

Как сделать подгрузку страницы при нажатии на ссылку

Плавная подгрузка товаров при прокрутке страницы …

JavaScript-ссылки и всё, что с ними связано — Searchengines.ru

Автоматическая ajax-подгрузка элементов на странице …

Почему я не люблю AJAX-автоподгрузку и предпочитаю ссылки с …

Ajax подгрузка контента | Зона MODX — информация о системе …

1С-Битрикс — Автоматическая ajax-подгрузка элементов на странице

JavaScript-ссылки и всё, что с ними связано — Searchengines.ru

Не умничайте с формами для входа / Хабр

Bootstrap — Modal (модальное окно) | ИТ Шеф

Как динамически загружать контент страницы с помощью AJAX и …

При нажатии на одну ссылку открывались 2-ве — Для начинающих …

Как создать ссылку на загрузку MP3

Как создать ссылку на загрузку MP3

Как создать ссылку на загрузку MP3

Ajax пагинация в WordPress с сохранением ссылок

Плавная подгрузка товаров при прокрутке страницы …

AJAX-подгрузка постов в WordPress

Ускоряем загрузку страниц сайта путем загрузки видео с …

JavaScript-ссылки и всё, что с ними связано — Searchengines.ru

Создаем jQuery AJAX сайт, работающий также без JS

Ленивая загрузка (Lazy loading): что это, как сделать …

JavaScript-ссылки и всё, что с ними связано — Searchengines.ru

Как сделать кнопку ссылкой

Ускоряем загрузку страниц сайта путем загрузки видео с …

Ajax: Отправить HTML-форму без перезагрузки страницы

Вид ссылки на сайте картинкой: как это сделать и вставить на …

json — Как предотвратить загрузку страницы XHR и …

Как настроить индексирование сайта с динамической подгрузкой …

Drupal: Модуль Views Infinite Scroll \u2014 автоматическая …

Оптимизация (удаление кода из верхней части страницы …

Не умничайте с формами для входа / Хабр

AJAX подгрузка товаров при нажатии кнопки \

Ускоряем загрузку страниц сайта путем загрузки видео с …

Введение в Ajax

Руководство для новичков по настройке статических стартовых …

QuickForm 3 \u2013 конструктор веб форм.

JavaScript-ссылки и всё, что с ними связано — Searchengines.ru

AJAX пагинация в Laravel-5. Динамическая подгрузка контента …

О проверке AMP-страниц — amp.dev

Встроенные переменные в GTM

MailTo \u2014 что это и как в Html создать ссылку для отправки …

Не умничайте с формами для входа / Хабр

Виктор Петин. Санкт-Петербург — PDF

Турбо-страницы Яндекса \u2013 инструкция по подключению …

Аудит интернет-магазина по продаже крутилок спидометра

Просмотр документов PDF и установки Adobe Acrobat

Помощь в участии, проведении и организации электронных …

jQuery — Появление и скрытие блока при нажатие на ссылку

Drupal 8: Modal API или как работать с модальными …

Красивая смена страниц с помощью jQuery

HTML5-формы: улучшенные возможности, новые типы полей и атрибуты

Телеграмм ссылки: как сделать и скопировать ссылку Telegram

Drupal 8: Modal API или как работать с модальными …

Как вставить картинку на сайт | HTML \u2014 Примеры

Как сделать плеер на сайте при помощи HTML5, тег audio — Eqsash

Пагинация для блога

Ссылки на соцсети, карта сайта, контакты и награды: что …

Код ссылки (тег \u003ca\u003e) | HTML \u2014 Примеры

Ajax-подгрузка контента при прокрутке страницы

retailCRM Документация | Users / Страница заказа

Хватит делать сайты с бесконечной прокруткойǃ / Хабр

Как загружать и вставлять PDF файлы в WordPress?

Турбо-страницы Яндекса \u2013 инструкция по подключению …

Bootstrap 3 — Аккордеон | ИТ Шеф

Бесконечный скрол, пагинация или кнопка «Загрузить ещё»?

Настройка Tor Browser

Ajax подгрузка новостей по кнопке или при скролле — Готовые …

Кнопка \u2014 виджет Elementor \u2014 Блог о создании сайта …

Плавная подгрузка товаров при прокрутке страницы …

jQuery подгрузка контента без перезагрузки

Как добавить видео на сайт, чтобы не пострадала скорость …

Ускоряем загрузку страниц сайта путем загрузки видео с …

1С-Битрикс — Автоматическая ajax-подгрузка элементов на странице

Как вставить картинку на сайт | HTML \u2014 Примеры

Телеграмм ссылки: как сделать и скопировать ссылку Telegram

Слайдер для сайта на CSS и JavaScript | ИТ Шеф

Использование jQuery и PHP для создания Web-страниц на базе Ajax

TChromium Events — обработка событий

Вид ссылки на сайте картинкой: как это сделать и вставить на …

Как в Яндекс браузере сохранить страницу в HTML, MHT, ссылку …

Ajax-подгрузка контента при прокрутке страницы

Постоянные ссылки WordPress (permalinks) и их настройка в …

как заставить браузер загружать \

Drupal 8: Modal API или как работать с модальными …

Помощь в участии, проведении и организации электронных …

Бесконечный скроллинг или пагинация \u2014 какой прием …

Подгрузка постов на AJAX в WordPress. Бесконечный скроллинг.

Альфа-Бизнес Онлайн: Справка

Аудит сайта по приему спортивных ставок.

Ссылки во фреймах | htmlbook.ru

Как проверить скорость загрузки сайта на мобильном в google page

1С-Битрикс — Автоматическая ajax-подгрузка элементов на странице

retailCRM Документация | Users / Страница заказа

Обновлять страницу каждые 5 секунд chrome. Настройка …

Как сделать ссылку ВКонтакте в виде кнопки | Просто делай так

Как загрузить сайт на хостинг? — Раздел помощи — SpaceWeb

Запуск Google Chrome | Интернет — грамотность с Надеждой

Постраничная навигация с асинхронной подгрузкой постов в WordPress. Бесконечная прокрутка постов.

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

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

Работать будем со стандартной темой TwentySeventeen, во-первых, эта тема довольно простая и будет нетрудно разобраться в коде, во-вторых, вы всегда можете установить её прямо из админки из репозитория тем WordPress.

Что мы попробуем сделать в этом посту?

  • Загрузку постов при нажатии на кнопку Загрузить ещё.
  • Бесконечную загрузку, т е посты и комментарии будут подгружаться автоматически при прокрутке страницы (да, как во вконтакте).
  • Сделаем так, чтобы подгрузка постов работала для любых архивов таксономий.

Шаг 1. Добавление кнопки «Загрузить ещё» 


Для начала нам надо найти файл, в котором добавляется постраничная навигация. В TwentySeventeen этот файл — прямо index.php. Если вы не понимаете, в каком файле надо искать в вашей теме, рекомендую взглянуть на этот туториал.

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

Найдите соответствующее место в шаблоне за пределами цикла while, то есть после того, как заканчивается вывод постов (в TwentySeventeen это место практически сразу после endwhile) и вставляем туда код:

<?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; ?>;
    var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
    </script>
    <div>Загрузить ещё</div>
<?php endif; ?>
ajaxurl
Это обработчик AJAX-запросов в WordPress.
true_posts
Сериализованный массив, содержащий все необходимые параметры запроса, является свойством класса WP_Query.
current_page
Номер текущей страницы.

А теперь немного стилей, которые мы добавим на нашу кнопку, чтобы она круто выглядела (стили можно вставить в стандартный style.css в папке с темой).

#true_loadmore{
    background-color: #ddd; /* сервый фон */
        border-radius: 2px; /* закругление углов */
        display: block; /* блочный элемент, на случай, если захотите использовать <a> */
        text-align: center; /* выравнивание текста по центру */
        font-size: 14px; font-size: 0.875rem; /* размер шрифта */
        font-weight: 800; /* начертание */
        letter-spacing: 1px; /* межбуквенный интервал */
        cursor: pointer; /* курсор мыши при наведении такой же, как при наведении на ссылку */
        text-transform: uppercase;
        padding: 10px 0; /* внутренние отступы сверху и снизу у кнопки */
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; /* CSS-анимация*/
}
#true_loadmore:hover{
    background-color: #767676;
    color: #fff;
}

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

Самый легкий шаг позади.

Шаг 2. Подключение скриптов jQuery 


Документация функций wp_enqueue_script() и get_stylesheet_directory_uri() в помощь. Про подключение скриптов я писал часто и подробно, поэтому сейчас на этом останавливаться не будем, если есть проблемы — смотрите документацию. А этот код — в functions.php.

function true_loadmore_scripts() {
    wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
    wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );

Шаг 3. Скрипт асинхронной загрузки 


Вы ещё не создали файл loadmore.js в папке с темой? Давайте создадим его и добавим туда следующий код:

jQuery(function($){
    $('#true_loadmore').click(function(){
        $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
        var data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                if( data ) { 
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

Я постарался сделать этот код максимально простым, дополнительными переменными усложнять его не стал. Если вы хотя бы немного разбираетесь в jQuery, то у вас не возникнет с ним никаких проблем. Даже если не разбираетесь, но сделаете всё по инструкции, то всё тоже будет ок.

Шаг 4. Обработчик PHP, вывод постов 


Этот код также отправляется в файл functions.php. Если он вам непонятен, читайте подробнее про WP_Query и query_posts().

<?php
function true_load_posts(){
 
    $args = unserialize( stripslashes( $_POST['query'] ) );
    $args['paged'] = $_POST['page'] + 1; // следующая страница
    $args['post_status'] = 'publish';
 
    // обычно лучше использовать WP_Query, но не здесь
    query_posts( $args );
    // если посты есть
    if( have_posts() ) :
 
        // запускаем цикл
        while( have_posts() ): the_post();
 
            get_template_part( 'template-parts/post/content', get_post_format() );
 
        endwhile;
 
    endif;
    die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Бесконечная загрузка постов при прокрутке страницы. 


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

Скажу честно — заразная вещь. Те, кто сидят на сайте вконтакте, понимают это прекрасно. Так что, если у вас новостной сайт, тогда этот способ загрузки постов просто «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 разметкой данные возвращаются в скрипт и размещаются на странице.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Если прокрутка включена
if($settings.scroll == true) {
   // .. и пользователь прокручивает страницу
   $(window).scroll(function() {
               
      // Проверяем пользователя, находится ли он в нижней части страницы
      if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
                 
         // Идет процесс
         busy = true;
                 
         // Сообщить пользователю что идет загрузка данных
         $this.find(‘.loading-bar’).html(‘Загрузка данных’);
                 
         // Запустить функцию для выборки данных с установленной задержкой
         // Это полезно, если у вас есть контент в футере
         setTimeout(function() {
                     
            getData();
                     
         }, $settings.delay);
                     
      }  
   });
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Функция AJAX запроса
function getData() {
           
     // Формируется POST запрос к ajax.php
     $.post(‘ajax.php’, {
                 
          action   : ‘scrollpagination’,
          number   : $settings.nop,
          offset   : offset,
                   
     }, function(data) {
                 
          // Информируем пользователя
          $this.find(‘.loading-bar’).html($initmessage);
               
          // Если возвращенные данные пусты то сообщаем об этом 
          if(data == «») {
               $this.find(‘.loading-bar’).html($settings.error); 
          }
          else {
               // Смещение увеличивается
               offset = offset+$settings.nop;
                     
               // Добавление полученных данных в DIV content
               $this.find(‘.content’).append(data);
                 
               // Процесс завершен  
               busy = false;
          }
                 
     });
               
}

Файл AJAX.php

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
 
mysql_connect(‘localhost’, ‘username’, ‘password’) or die();
mysql_select_db(‘database’);

$offset = is_numeric($_POST[‘offset’]) ? $_POST[‘offset’] : die();
$postnumbers = is_numeric($_POST[‘number’]) ? $_POST[‘number’] : die();

$run = mysql_query(«SELECT * FROM ex_posts ORDER BY id DESC LIMIT «.$postnumbers.» OFFSET «.$offset);

while($row = mysql_fetch_array($run)) {
   
   $content = substr(strip_tags($row[‘text’]), 0, 500);
   
   echo ‘<h2><a href=»#»>’.$row[‘title’].'</a></h2><hr />’;
   echo ‘<p>’.$content.’…</p><hr />’;

}

?>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {

   $(‘#content’).scrollPagination({

      nop     : 10, // Количество запрашиваемых из БД записей
      offset  : 0, // Начальное смещение в количестве запрашиваемых данных
      error   : ‘Записей больше нет!’, // оповещение при отсутствии данных в БД
      delay   : 500, // Задержка перед загрузкой данных
      scroll  : true // Если true то записи будут подгружаться при прокрутке странице
                   // иначе только при нажатии на кнопку
     
   });
   
});

Дополнение

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

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

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

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

 Изображение 1

 Изображение 1

 Изображение 1

 Image 1

 Image 1

 Изображение 1

 Image 1

 Image 1

 Изображение 1

 Image 1

 Image 1

 Изображение 1

 Image 1

 Image 1

 Изображение 1

 Image 1

 Image 1

 Изображение 1

 Image 1

 Image 1

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.

jQuery Infinite Scroll — лучший в бесконечной прокрутке плагины jQuery

Этот плагин очень прост и удобен в использовании. У него есть много вариантов функции обратного вызова, таких как — 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. Использование правильных заполнителей изображения

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

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

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

a) Заполнитель доминирующего цвета

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

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

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

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

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

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

  
исходное изображение


 заполнитель доминирующего цвета   

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

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

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

b) Заполнитель изображения низкого качества (LQIP)

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

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

Эту технику использовали 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, то наверняка заметили, как сайт загружает основное изображение в сообщение.

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

Размытое изображение-заполнитель на веб-сайте Medium Высокое разрешение, отложенная загрузка изображения на веб-сайте 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 - это многофункциональный сценарий отложенной загрузки для элементов , , и