Ленивая загрузка. Делаем “ленивую” прокрутку на jQuery. Метка-заполнитель для изображения
Всем привет. Сегодня хочу поговорить с вами о том, как организовать «ленивую загрузку» контента на посадочных страницах.
Часто, ее еще называют «бесконечной прокруткой». Наверняка вы видели подобный эффект, когда контент изначально не присутствует на сайте, а по мере прокрутки страницы он плавно подгружается.
Давненько уже написали в раздел «Ваши предложения», с просьбой написать статью о том, как реализовать такой эффект:
Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим…
Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:
А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке «Показать еще». Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.
Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:
Портфолио Показать еще...
Как видите, все — просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio — это «контейнер» для нашего портфолио. MoreButton — это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv — область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.
Например, часть из читателей все равно будет пытаться тестировать этот скрипт не на сервере, а просто откроют индексный файл в браузере. В таком случае они увидят сообщение об ошибке. Кроме того, при совсем медленном соединении, на загрузку файлов может понадобиться время, и чтобы пользователь понимал, что процесс идет, можно вписать туда сообщение, что идет загрузка данных или поместить (картинку, индикатор прогресса или еще что-то).
Сам скрипт я не писал, а нашел на одном из сайтов, автор указан в исходнике, кому интересно — посмотрите. Так как он не слишком большого размера, то приведу его весь, но если вы планируете использовать такие же названия айдишников и пути к файлам, как у меня, то можете даже не заглядывать в него, а просто подключить перед закрывающимся тегом body (в футере).
Для тех, кто планирует вносить правки вот сам скрипт:
Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);
Итак, теперь стоит поговорить о тех файлах, из которых мы будем подгружать информацию. Скрипт предполагает, что это будут файла с именами 2.html…5.html и т.д. В которых лежит наша информация. Например, у меня первым подгружается файл 2.html и он имеет такое содержимое:
В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний — пустой. Это предполагает логика скрипта.
Путь в скрипте указан следующим образом:
Var url = "./pages/" + page + ".html";
Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:
ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";
И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:
Вот так на landing page можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!
Скорость загрузки является важным требованием к сайту как со стороны поисковиков, так и с точки зрения пользователей. Люди хотят быстро получать информацию, а не ждать несколько секунд пока отобразится страница. Именно поэтому разработчики пытаются всячески улучшить данный процесс: внедряют подборки рекомендаций как на mkels.com , экспериментируют с сервисами и CMS модулями.
Если говорить про картинки, то тут 2 варианта: оптимизация с помощью веб-решений или графических редакторов, а также ленивая загрузка изображений (англ. — Lazy Load). В WordPress для второго метода имеется целый ряд плагинов, которые сегодня рассмотрим.
Основной принцип отложенной загрузки картинок заключается в том, дабы показывать их только тогда, когда пользователь прокручивает до места, где они фактически находятся. По умолчанию браузеры скачивают и обрабатывают всю графику сразу, что в свою очередь создает ненужную задержку.
Как работает Lazy Load:
- браузер подгружает содержимое сайта без медиафайлов;
- с помощью некого JavaScript определяются какие картинки/видео должны выводиться изначально при запуске страницы;
- «дополнительная» материалы отображается при прокрутке, когда пользователь доходит до нужного контента.
Все очень даже логично — зачем изначально скачивать информацию с сервера, которую человек физически не видит и, возможно, даже к ней не дойдет. Отложенная загрузка изображений может значительно улучшить ситуацию со скоростью работы сайтов, в которых используется много высококачественных иллюстраций или видеороликов.
Первый модуль основан на скрипте jQuery.sonar (автор Dave Artz, AOL), позволяющем определить какая картинка находится в видимости пользователя. Я использую именно его т.к. в описании сказано, что созданием занималась команда из Automattic (wordpress.com) и другие опытные программисты. К тому же здесь больше всего установок (90 тыс.), хотя он и обновлялся давненько + оценка лишь 4. По личному опыту все работает отлично.
Кроме картинок в постах плагин добавляет ленивую загрузку изображений из миниатюр, + iframes (включая популярные видеохостинги YouTube / Vimeo). Поддерживается контент в виджетах — особенно актуально после добавления в WP виджетов вставки видео/графики. Пользователи без Javascript будут видеть обычную неоптимизированную страницу. Нормально работает с CDN. Загрузок — 50 тыс, оценка 4, обновление было не так давно.
a3 Lazy LoadОдно из самых «новых» решений — апдейт 2 месяца назад + поддержка самой . Скачивания — более 10тысяч, оценка 4,5. Отличительной его особенностью есть целый блок настроек в админке, где вы можете вручную выбрать какие типы объектов будут обработаны: миниатюры, виджеты, граватары и т.п.
Аналогичные настройки есть для видео и iframe контента (встроенного кода). Также модуль совместим с CDN, AMP, WooCommerce, WPTouch, WP Super Cache и W3 Total Cache. По ощущениям это самый продвинутый вариант из всех — тут реализована не просто отложенная загрузка картинок, а предоставляется целый комплекс функций по оптимизации.
Собственно модуль делает то же, что и остальные — улучшает время загрузки и сокращает число HTTP запросов. В описании сказано, что он не использует тяжелые библиотеки по типу jQuery, а скрипт весит 6Кб. Для старта не нужны дополнительные настройки — просто устанавливаете и активируете.
Rocket Lazy Load работает в том числе с аватарами и превью, хотя в отзывах были замечания, что могут возникать ошибки с дизайном — проверяйте работоспособность сайта после внедрения. А еще лучше использовать пример кода с репозитория, позволяющий отключить вызов решения на некоторых ненужных страницах (оставить только single).
Crazy LazyДанный плагин ленивой загрузки контента и изображений обрабатывает все картинки, которые добавлены в медиабиблиотеку, в том числе и . Работает сразу из коробки, без дополнительных действий, хотя у разработчиков есть настройки: установка картинки-загрузчика и возможность исключить обход некоторых материалов.
Скачиваний — 5000, оценка — 4,5. В описании нет информации, что аватары и виджеты также «подхватываются» автоматические, уточните при тестировании. С другой стороны, если у вас, например, для комментариев используется сторонний скрипт, то это нормально.
Авторы охарактеризовали свое творение как самый быстрый, легкий и производительный метод отложенной загрузки в Вордпресс. Лучше бы они, конечно, детальнее рассказали о списке настроек, которые получит пользователь после установки. Здесь есть: выбор типов графики для обработки, использование минифицированных версий скриптов, а также перемещение их в футер, добавление эффектов прелоадеру и некоторые другие аддоны. Таким образом, модуль позволяет дополнительно реализовать некоторые SEO рекомендации для WordPress , что весьма удобно.
Плюсом Lazy Load XT можно назвать использование прозрачной картинки-загрузчика, поэтому на странице пользователи не увидят «белых блоков» вместо подгружаемых изображений. Также здесь есть поддержка фоновой графики при желании (но это уже выходит за рамки контента, и нужно быть внимательным).
Напоследок парочка нестандартных решений. Данный плагин кроме функции Lazy Load в Вордпресс добавляет парочку интересный штук. Во время генерации контента появляется полупрозрачный экран загрузки, где будет отображен процент завершения процесса. Все это идет с анимацией и разными настройками: цвет/изображение для фона, срабатывание один раз на страницу/сессию, исключения и т.п. В целом, воспринимается больше как WOW эффект, но после нескольких раз может начать раздражать.
Lazy Load for VideosМодуль заменяет встроенные видео с Vimeo и Youtube на кликабельные изображения. Загрузка ролика начнется только после клина пользователя на превью. Используется поэтому никаких дополнительных скриптов не нужно. В принципе, у него есть достаточно много функций, он активно развивается + показатели скачивания (6тыс.) и оценка (4,5) весьма неплохие. В предыдущих модулях вы могли видеть также поддержку видеоконтента и iframes, но здесь гораздо больше разных опций. Думаю, Lazy Load for Videos идеально подойдет для видео-сервисов с подборками клипов, трейлеров, смешных роликов и т.п.
Эффективность отложенной загрузкиКак я уже сказал, работаю с модулем Lazy Load — проблем пока не возникает, картинки грузятся только при прокрутке, причем достаточно быстро. Лично я никаких специальных замеров не проводил, ориентируюсь исключительно на визуальный эффект, который наблюдаю «до» и «после».
Можно заметить, как ленивая загрузка изображений и контента с помощью a3 Lazy Load значительно отличается по показателям у других методов. Все дело в обработке картинок:
- По умолчанию WordPress передает браузеру все доступные значения размеров , которые имеются. Тот в свою очередь загружает наименьшую версию, доступную для текущего размера окна.
- Модули BJ Lazy Load, Lazy Load XT подменяют базовую функцию системы и атрибуты в коде, что позволяет использовать полноценную версию картинки.
- Решение a3 Lazy Load полностью копирует логику Вордпресс — то есть считываются минимально возможные по объему файлы.
Не смотря на меньшее число запросов и итоговый вес в последнем варианте, BJ Lazy Load все равно оказывается быстрее. Дело в том, что плагин отправляет в браузер информацию вида data:image/gif, которая вынуждают его создавать gif файлы локально, а не скачивать с сервера (через HTTP запросы).
Однако тут есть один очень важный момент — отложенная загрузка изображений в BJ Lazy Load будет хорошо работать, если сами картинки были оптимизированы ранее . То есть, допустим, пользователь добавляет на сайт 10 фоток 3000х2000 пикселей — в таком случае вы рискуете получить глюк, когда при прокрутке страницы во время загрузки графики будут выводится белые непрозрачные блоки-прелоадеры.
Так не случится, если фон у вас белый изначально. В противном случае нужно будет добавить другой прелоадер (почти все модули позволяют это сделать). В Lazy Load XT даже предусмотрена прозрачная картинка для подобных целей.
Итого
Можно сделать следующие выводы:
- Если вы используете оптимизированные изображения через программы или Tinypng, то самый быстрый вариант BJ Lazy Load (при сравнении трех модулей).
- Когда фото вставляются на сайте «как есть» (с большим разрешением), оптимальнее будет решение a3 Lazy Load, которое кроме ленивой загрузки использует встроенную в WP логику работы с графикой.
- Могу также посоветовать плагин, которым пользуюсь я — Lazy Load. Каких-либо тестов не проводил, но там крутые разработчики и максимум скачиваний.
- Если будете пробовать другие решение, желательно проверять их эффективность.
У кого есть что еще добавить по теме отложенной загрузки картинок и контента, пишите в комментариях.
- Перевод
В наши дни главным камнем преткновения на пути к высокой скорости загрузки сайтов являются изображения. Это особенно характерно для проектов из сферы электронной коммерции. На них изображения, обычно довольно «тяжёлые», составляют основную часть содержимого страниц. Это, как правило, приводит к тому, что для того, чтобы показать пользователю страницу, его браузеру требуется загрузить несколько мегабайт графических данных. Как ускорить загрузку страниц в такой ситуации? Ответу на этот вопрос и посвящён материал, перевод которого мы сегодня публикуем.
Общие положения Рассмотрим, для примера, стартовую страницу отдела Home на сайте Walmart.Страница, на которой имеется множество изображений
Вот сведения о том, сколько изображений загружается для формирования этой страницы:
Изображения, загружаемые при формировании страницы
Как видите, тут 137 изображений! Это означает, что более 80% данных, необходимых для вывода страницы и передаваемых по сети, представлены в виде графических файлов.
Проанализируем теперь сетевые запросы, выполняемые при загрузке страницы:
Сетевые запросы, выполняемые при формировании страницы
В данном случае файлы, полученные в результате разделения кода проекта, загружаются позже, чем могли бы. Происходит это из-за того, что сначала нужно загрузить главный бандл cp_ny.bundle . Этот бандл можно было бы загрузить куда быстрее, если бы ему не мешали 18 изображений, соревнующихся друг с другом за полосу пропускания.
Как это исправить? На самом деле, по-настоящему «исправить» это не получится, но можно сделать много всего для того, чтобы оптимизировать загрузку изображений. Существует немало подходов к оптимизации изображений, используемых на веб-страницах. Среди них - использование различных форматов графических файлов, сжатие данных, применение техники blur animation, использование CDN. Мне хотелось бы остановиться на так называемой «ленивой загрузке» изображений (lazy loading). В частности, речь пойдёт о том, как реализовать эту технику на React-сайтах, но, так как основана она на механизмах JavaScript, её можно интегрировать в любой веб-проект.
Экспериментальный проект Начнём с такого вот предельно простого React-компонента Image:Class Image extends PureComponent {
render() {
const { src } = this.props;
return ;
}
}
Он принимает, в качестве свойства, URL, и использует его для рендеринга HTML-элемента img . Вот соответствующий код на JSFiddle. На следующем изображении показана страница, содержащая этот компонент. Обратите внимание на то, что для того, чтобы увидеть выводимое им изображение, нужно прокрутить содержимое страницы.
Страница с компонентом, выводящим изображение
Для того чтобы реализовать в этом компоненте методику ленивой загрузки изображений нужно выполнить следующие три шага:
Render() { return ; }
Шаг 2 Здесь мы настраиваем механизмы, которые позволяют обнаружить момент попадания изображения в область просмотра.ComponentDidMount() {
this.observer = new IntersectionObserver(() => {
// тут будет код для реализации третьего шага
},
{
root: document.querySelector(".container")
});
this.observer.observe(this.element);
}
....
render() {
return this.element = el} />;
}
Разберём этот код. Вот что здесь сделано:
- К элементу img добавлен атрибут ref . Это позволяет позже обновить ссылку на изображение в src без необходимости проводить повторный рендеринг компонента.
- Создан новый экземпляр IntersectionObserver (об этом мы поговорим ниже).
- Объекту IntersectionObserver предложено наблюдать за изображением с использованием конструкции observe(this.element) .
На первый взгляд такая характеристика API может показаться не особенно понятной, но, на самом деле, устроено оно очень просто. Экземпляру IntersectionObserver передаётся несколько параметров. В частности, мы использовали параметр root , который позволяет задать корневой DOM-элемент, рассматриваемый нами в качестве контейнера, о пересечении элемента с границей которого нам нужно узнать. По умолчанию это область, в которой находится видимый фрагмент страницы (viewport), но я явным образом установил его на использование контейнера, находящегося в элементе iframe JSFiddle. Сделано это для того, чтобы, позже, рассмотреть одну возможность, которая не рассчитана на использование элементов iframe .
Причина, по которой использование IntersectionObserver для определения момента того, когда элемент становится видимым, популярнее более традиционных методов, вроде совместного применения onScroll и getBoundingClientRect() заключается в том, что механизмы IntersectionObserver выполняются за пределами главного потока. Однако, коллбэк, вызываемый после того, как IntersectionObserver обнаружит пересечение элемента с контейнером, выполняется, естественно, в главном потоке, поэтому его код не должен быть слишком тяжёлым.
Шаг 3 Теперь нам надо настроить коллбэк, вызываемый при обнаружении пересечения элемента target (this.element в нашем случае) с контейнером root (в нашем случае это div -элемент.container).This.observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const { isIntersecting } = entry;
if (isIntersecting) {
this.element.src = this.props.src;
this.observer = this.observer.disconnect();
}
});
},
{
root: document.querySelector(".container")
});
....
В коллбэк, при обнаружении пересечения, передаётся массив элементов entries , который напоминает набор снимков состояния всех целевых элементов, для которых обнаружено пересечение заданной границы. Свойство isIntersecting указывает на направление пересечения. Если элемент, за которым организовано наблюдение, попадает извне в корневой элемент, оно равно true . Если элемент покидает корневой элемент, то оно равно false .
Итак, когда выясняется, что элемент пересёкся с нижней границей контейнера, я вручную устанавливаю его свойство src и отключаю наблюдение за ним, в котором больше нет необходимости.
Шаг 4 (секретный) Теперь, на четвёртом, секретном шаге нашей работы, можно полюбоваться результатом и порадоваться успеху. Вот код , в котором собрано то, о чём мы только что говорили.Результат применения методики ленивой загрузки изображений
Однако если поближе рассмотреть то, что у нас получилось, окажется, что тут можно найти кое-что не очень хорошее. Для того чтобы это разглядеть, я быстро прокрутил страницу, замедлив при этом скорость сетевого соединения.
Поведение страницы при её быстрой прокрутке и замедлении скорости сетевого соединения
Так как мы загружаем изображение только после того, как оно достигло области, в которой оно уже должно быть видимым, у пользователя нет возможности прокрутить страницу и увидеть область, занимаемую изображением, и, естественно, само изображение, до его загрузки. Когда сайты смотрят с обычных компьютеров, подключённых к быстрому интернету, это проблем не вызывает. Но многие современные пользователи посещают сайты с телефонов, иногда они пользуются 3G-сетями или, что ещё хуже, EDGE-подключениями.
С этой проблемой, правда, справиться не так уж и сложно. Сделать это можно благодаря тому, что API Intersection Observer предоставляет разработчику возможность расширять или сужать границы корневого элемента (в нашем случае это элемент.container). Для того чтобы этой возможностью воспользоваться, достаточно добавить одну строчку кода туда, где осуществляется настройка корневого контейнера:
RootMargin: "0px 0px 200px 0px"
В свойство rootMargin надо записать строку, структура которой соответствует правилам CSS, используемым для настройки параметров отступов элементов. В нашем случае мы сообщаем системе о том, что нижнюю границу, используемую для обнаружения пересечения элемента с контейнером, нужно увеличить на 200 пикселей. Это означает, что соответствующий коллбэк будет вызван, тогда, когда элемент попадёт в область, которая на 200 пикселей ниже нижней границы корневого элемента (по умолчанию здесь используется значение 0).
Вот код, в котором реализована эта методика.
Совершенствование методики ленивой загрузки изображений
В результате оказывается, что когда мы прокручиваем страницу лишь к 4-му элементу списка, изображение загружается в области, которая на 200 пикселей ниже видимой области страницы.
Теперь, казалось бы, сделано всё, что нужно. Но это не так.
– это отказ от загрузки всего контента на странице, когда в этом нет нужды. При этом применяется маркер, сообщающий, что данные не загружены, но в случае необходимости их нужно будет загрузить.
Применяя ленивую загрузку, картинки и прочие материалы на сайте подгружаются асинхронно, а конкретнее, после того, как полностью загрузится видимый фрагмент веб-страницы или исключительно при отображении видимой части окна браузера. Например, если посетитель не до конца проскроллит страницу, то изображения расположенные внизу, не будут загружаться.
Lazy loading актуален на многих ресурсах, особенно на тех, где есть изобилие картинок. Посетите любой онлайн-сервис с фотографиями в высоком разрешении и обратите внимание, как площадка подгружает фото только видное на вашем экране, а при скролле вниз новые фото начинают загружаться, как только появляются у вас на экране. По мере скроллинга происходит замена плейсхолдеров на изображения высокого разрешения.
Бывают нередкие случаи, когда определенный фрагмент страницы виден не всем, однако на его обработку или передачу материала затрачивается огромное количество ресурсов. Вот тогда и приходит время задуматься об отложенной загрузке, которая исключит генерацию и загрузку скрытых элементов до тех пор, пока их не понадобится просмотреть или использовать.
На заметку. Ленивая загрузка задействуется технологией , и она порождается событиями, отслеживаемыми посредством . Поэтому перед использованием асинхронной загрузки важно учесть, что пользователям, у которых нет JS, функция будет недоступна, а роботы поисковиков не увидят скрытый скриптом контент.
А теперь поговорим о двух весомых причинах, по которым стоит сделать выбор в пользу отложенной загрузки:
Исходя из вышесказанного можно сделать вывод, что ленивая загрузка значительно повышает производительность сайта.
Разновидности ленивой загрузкиЧтобы улучшить производительность сайта, нужно создать скрипт ленивой загрузки изображений и контента. Существует много вариантов, как это сделать.
5 вариантов ленивой загрузки для изображенийПоговорим о самых распространенных и готовых решений ленивой загрузки для изображений.
В упрощенной версии данный скрипт ленивой загрузки представляет собой замену атрибута src на data-src в теге img :
Элементы img , содержащие атрибуты data-src , скрыты в . После того, как картинки будут загружены, они плавно отображаются с применением переходов:
Img { opacity: 1; transition: opacity 0.3s; } img { opacity: 0; }
Затем JavaScript передает всем тегам img атрибут src , которые в итоге получают значение атрибута data-src . После загрузки всех изображений, data-src убирается из img :
ForEach.call(document.querySelectorAll("img"), function(img) { img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() { img.removeAttribute("data-src"); }; });
Еще David Walsh предусмотрел фолбек в случае несрабатывания JavaScript, отличающийся эффективностью и простой реализацией. Однако его функции не предусматривают загрузку при скроллинге веб-страницы. Это значит, что браузер подгружает все изображения вне зависимости от того, «дошел» посетитель до них, либо нет. Да, фолбек позволяет показывать страницу быстрее, потому что картинки загружаются после HTML, однако экономии трафика не будет.
Техника подразумевает ленивую загрузку, в которой JS применяется в качестве улучшения для стандартных CSS и HTML. Прогрессивное улучшение обеспечивает показ изображений для пользователей даже в том случае, если JavaScript, который и отвечает за их отображение, будет отключен или появится ошибка, блокирующая работу скрипта.
Прогрессивное улучшение обладает несколькими преимуществами:
Детальную информацию о решении Osborne можете узнать .
№3. Плагин bLazy.js на простом JSДанный скрипт мало весит, осуществляет асинхронную загрузку и работу с несколькими изображениями с целью экономии трафика и запросов на сервер. Его применение обеспечивает:
Стандартная реализация. Разметка:
Тег img требуется поменять:
JavaScript: укажите стандартный вызов bLazy и осуществите настройку объекта по карте опций:
Var bLazy = new Blazy({ //опции });
№4. Плагин Lazy Load XT jQueryОтличный плагин для удобного написания своего скрипта ленивой загрузки. Отметим, что есть полная версия jQuery плагина, где посредством асинхронной загрузки можно загружать видео, iframe и прочие теги, содержащие атрибут src , а есть упрощенная, посвященная исключительно простой отложенной загрузке.
Для использования плагина на сайте, нужно перед закрывающим тегом добавить jQuery-библиотеку, указав jquery.lazyloadxt.js (упрощенная версия) или jquery.lazyloadxt.extra.js (расширенная):
Есть также альтернативный вариант, позволяющий не использовать весь плагин – облегченный скрипт jqlight.lazyloadxt.min.js :
В изображениях замените src на атрибут data-src :
Плагин может активироваться автоматически, либо вы можете сделать это самостоятельно. Для этого просто введите:
$(elements).lazyLoadXT();
Lazy Load XT jQuetry добавляет большое количество аддонов. К примеру:
Плюсы техники:
Просмотреть все аддоны и варианты можете по этой ссылке .
№5. Размытое изображение от Craig BucklerВы наверняка замечали на некоторых сайтах, как основное изображение статьи сначала размытое, а потом загружается четкая картинка высокого качества. Есть несколько вариантов загрузки фотографий методом размытого эффекта. Один из лучших – Craig Buckler.
Преимущества техники заключаются в:
Скачать код вы можете с хранилища сайта GitHub .
Для начала нужно подключить библиотеку jQuery:
Суть метода заключается в том, чтобы с использованием AJAX загружать необходимый элемент div с левого файла на целевую страницу.
Портфолио Показать еще...
Все довольно просто и понятно. Но нужно уделить внимание div с id=»smartPortfolio» , , потому что они находятся в важнейшем скрипте, отвечающем за загрузку контента со сторонних документов. «Контейнером» портфолио выступает SmartPortfolio. MoreButton – кнопка, нажимая на которую происходит загрузка еще одного фрагмента портфолио. LoadingDiv – часть страницы, где будет отображаться текст в случае полного открытия портфолио или возникновения какой-либо ошибки.
К примеру, многие из тех, кто прочтут эту статью, затем протестируют скрипт через индексный файл в браузере, а не загрузив его на сервер. Будут получать оповещение об ошибке. А если еще и слабое интернет-соединение, то файлы будут загружаться дольше. Поэтому актуально написать сообщение или вставить картинку, дающие пользователю понять, что идет загрузка.
Вот и сам скрипт, для подключения которого нужно вставить код перед закрывающимся тегом body :
Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);
В структуре веб-ресурса страницы, откуда будут браться данные для загрузки при нажатии, находятся в папке pages . В ней 3 файла, последний из них пустой. Так предусмотрено логикой скрипта. Путь в нем имеет следующий вид:
Var url = "./pages/" + page + ".html";
Но при использовании иного пути важно заменить его в самом скрипте. То же самое нужно сделать, если вы применили другие ID:
ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";
При работе в Интернете всем хочется, чтобы страницы сайтов загружались как можно быстрее, никому не нравится долго ждать завершения загрузки той или иной страницы. Причём это ожидание может затягиваться весьма существенно в тех случаях, когда изображений на странице великое множество. Присутствие изображений на странице делает страницу более привлекательной для посетителей, увеличивает наглядность и в конечном счёте, способствует повышению посещаемости вашего сайта. Однако приходится считаться с тем, что наличие изображений значительно утяжеляет страницы, увеличивая время их загрузки.
Медленная загрузка страниц отрицательно сказывается на SEO оптимизации вашего сайта. В настоящее время многие сайты используют в своих постах изображения в GIF или PNG -формате. Такие изображения имеют больший объём, чем изображения в формате JPEG, в результате загрузка страниц может занять ещё больше времени. Для загрузки каждого такого изображения требуется отдельный HTTP-запрос, что также не способствует ускорению загрузки.
Для решения этой проблемы применяется так называемая «ленивая» или отложенная загрузка, при которой загружаются только те изображения, которые необходимы пользователю. В данной статье приводится описание шести лучших бесплатных плагиновWordPress для “ленивой” загрузки, помогающих значительно повысить скорость загрузки страниц.
1. a3 Lazy Load — лучший плагин ленивой загрузкиПлагин ускоряет блог и повысить визуальный отклик страницы на ПК, планшетах и мобильных телефонах.
a3 Lazy Load не создает нагрузки на сайт и при этом является мобильно ориентированным. Простой в использовании плагин, который ускорит работы сайта. Чем больше на сайте будет тяжелых элементов, тем лучше плагин будет выполнять свою работу и тем больше вы увидите улучшений в производительности.
- Ленивая загрузка для всех изображений, граватары, видео и фреймов
- Выбор эффектов загрузки
- Поддержка WooCommerce
- Высокая производительность и низкой нагрузкой
- Можно делать исключения изображений и видео
- Резервная подключение JavaScript
- Поддержка всех браузеров
Это плагин для отложенной загрузки изображений, разработанный WordPress.com, командой TechCrunch и Джеком Голдманом. Он имеет простой код, поэтому не перегружает ресурсы сервера.
Lazy – простой в установке и настройке плагин. Он практически не требует настройки, начиная работу сразу после установки.
Основные характеристики плагина:- Простой код.
- Работает на WordPress.
- Простота в использовании.
- Использует jQuery.sonar.
BJ – ещё один бесплатный плагин WordPress для ленивой загрузки, который заменяет все ваши изображения, миниатюры, граватары и содержимое элементов iframe в отслеживаемой области “заглушкой”. Сами изображения подгружаются после появления в окне браузера. Такой способ позволяет ускорить загрузку страниц, а также сэкономить трафик пользователя.
Плагин имеет отзывчивый дизайн, позволяющий работать с мобильными устройствами. На мобильных устройствах изображения автоматически масштабируются в соответствии с размером экрана. Этот плагин имеет поддержку Retina, что означает возможность работы на устройствах Apple.
Основные характеристики плагина:- Замена изображений “заглушкой”.
- Автоматическое изменение размеров изображений.
- Поддержка Retina.
- Экономия пользовательского трафика.
jQuery – бесплатный плагин для “ленивой” загрузки, использующий Java-скрипт. Java-скрипт подгружает изображения только тогда, когда они оказываются в видимой области окна браузера.
jQuery – весьма популярный плагин из WordPress репозитория.
Основные характеристики плагина:- Популярность.
- Использование Java-скрипта.
- Небольшой объём.
- Практически не нуждается в настройках.
Это очень хороший плагин WordPress для ленивой загрузки, который подгружает изображения тогда, когда пользователь, прокручивая страницу, достигает области изображения. Этот плагин также использует jQuery-скрипт. Он позволяет уменьшать время загрузки, так как сначала загружается текст, а для изображений создаётся новое HTTP соединение.
То, что страницы не загружаются одновременно, позволяет уменьшить количество HTTP соединений и значительно снизить нагрузку на сервер.
Основные характеристики плагина:- Использует jQuery-скрипты.
- Позволяет уменьшить количество HTTP соединений.
- Позволяет ускорить загрузку страниц.
- Имеет два типа настроек.
Это очень небольшой плагин, использующий jQuery-скрипт. Он подгружает изображения с помощью скрипта объёмом всего 0.6 Кб. Плагин позволяет снизить нагрузку на сервер, уменьшая количество соединений.
Изображение подгружается в HTML код страницы по схеме data: URL, благодаря чему не требуется дубликат изображения, необходимый для “ленивой” загрузки.
Основные характеристики плагина:- Использует jQuery-скрипты.
- Использует лёгкие скрипты.
- Использует схему с data: URL.
- Позволяет уменьшить количество соединений.
В данной статье приведено описание бесплатных плагинов WordPress для «ленивой» загрузки изображений, которые помогут страницам вашего сайта WordPress загружаться быстрее. При помощи этих плагинов вы сможете просто творить чудеса. Напишите в комментариях о том, каким плагином для ленивой загрузки изображений вы пользуетесь.