Jquery ленивая загрузка изображений. Ленивая загрузка изображений. О результатах оптимизации
«Ленивая загрузка» - это программный плагин jQuery, написанный на JavaScript, который откладывает загрузку изображений на (больших) веб-страницах. Таким образом, изображения, которые не попадают в поле зрения пользователя, не будут открываться до тех пор, пока пользователь не прокрутит страницу вниз. То же самое, что предварительная загрузка, только наоборот.
Использование «ленивой загрузки» на сайтах, содержащих много изображений большого размера, позволяет ускорить загрузку страницы - браузер сообщит о полном открытии, как только откроются все видимые картинки. В некоторых случаях использование данного модуля помогает сократить нагрузку на сервер.
Программа написана на основе модуля для загрузки изображений, который называется YUI ImageLoader Utility , автор программы - Мэтт Млинак.
Прокручивайте страницы вниз для просмотра эффекта.
Исходники пока не получилось собрать. Работаю над этим.
Как работает программа?
Программный плагин основан на jQuery (ну а как же?) и переменных, разработанных Брендоном Аароном, которые теперь включены в разметку jQuery. Укажите их в заголовке:
$("img").lazyload();
После этого все изображения будут загружаться по мере доступа пользователя к ним.
Установка реагирования
В программе есть опции для педантов, которые хотят лично проследить за каждой мелочью. Можете установить порог открытия изображения - по умолчанию это значение равно 0, то есть картинка открывается только тогда, когда появляется на странице.
$("img").lazyload({ threshold: 200 });
Если вы установите пороговое значение 200, то до начала открытия 200 пикселей картинки уже будут загружены.
Метка-заполнитель для изображения
Также можно установить метку-заполнитель для изображения и событие, с которого будет начинаться загрузка. Метка-заполнитель должна содержать адрес изображения. Программный модуль предлагает прозрачные, серые и белые изображения размером 1*1 пиксель.
$("img").lazyload({ placeholder: "img/grey.gif" });
Событие для начала загрузки
Событие устанавливается в jQuery - им может стать что угодно, в том числе щелчок или движение мыши. Можете разработать свои собственные варианты. По умолчанию программа ждет, пока пользователь прокрутит страницу вниз - тогда в окне браузера появляются картинки. Чтобы изображения не загружались, пока пользователь не нажмет на метку-заполнитель, делаем вот что:
$("img").lazyload({
placeholder: "img/grey.gif",
event: "click"
});
Использование эффектов
По умолчанию плагин ждет полной загрузки изображения, а затем обращается к функции show(), чтобы его показать. Можете добавить к этой последовательности действий любой эффект, какой вам захочется. В нижеприведенном отрывке кода представлено добавление эффекта «постепенное проявление». На демо странице вы можете посмотреть, как это смотрится.
$("img").lazyload({
placeholder: "img/grey.gif",
effect: "fadeIn"
});
Внутреннее хранение изображений
Также вы можете использовать плагин для изображений, хранящихся внутри контейнеров со скроллами - для этого просто укажите контейнер в коде в качестве объекта jQuery. Есть демо-варианты для горизонтальных и вертикальных контейнеров.
#container {
height: 600px;
overflow: scroll;
}
$("img").lazyload({
placeholder: "img/grey.gif",
container: $("#container")
});
Если изображения отображаются не по порядку
После прокрутки страницы программа начинает поиск незагруженных изображений, проверяя в процессе поиска, не стало ли изображение видимым. По умолчанию поиск прекращается при обнаружении первой видимой картинки - предполагается, что порядок изображений на странице такой же, как и в html-коде. Однако при некоторых вариантах разметки дело обстоит не совсем так - в этом случае следует воспользоваться функцией failurelimit, которая регулирует порядок отображения картинок.
$("img").lazyload({
failurelimit: 10
});
Если мы устанавливаем значение функции равным 10, программа останавливает поиск после того, как обнаружит 10 видимых картинок. Если у страницы сложная разметка, следует указать здесь довольно большое число.
Можно организовать отложенную загрузку изображений, хотя это и не входит в основной функционал программы. Если вы добавите нижеприведенный код, то программа будет ждать полной загрузки страницы, причем не только ее html-элементов, но и изображений. Через пять секунд после окончания загрузки невидимые картинки также будут автоматически загружены. Можете ознакомиться с demo-версией .
$(function() {
$("img:below-the-fold").lazyload({
placeholder: "img/grey.gif",
event: "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});
На сегодня все! Спасибо за внимание.
В то время как многие люди уже пожинает плоды понятий ленивой загрузки, некоторые из них до сих пор задаются вопросом о lazy загрузки. Если у вас небольшие представления об отложенной загрузки и что она может сделать, то эта статья для вас. Мы рассмотрели все, что вам нужно знать о отложенной загрузки. Итак, читайте статью и начинайте работу!
Прежде, чем мы начнем с преимуществ lazy загрузки, дайте узнаем, что такое ленивая загрузка и как она работает.
Что такое отложенная (lazy) загрузка?Отложенная загрузка представляет собой механизм, в котором мы не можем задержать загрузку конкретного объекта, это может быть видео или просто изображение до определенного момента, где мы могли это сделать. Проще говоря, отложенная загрузка означает, загрузка объектов по требованию, а не загрузки всех объектов по умолчанию. Так раздражает проблема автоматической загрузки. Это повышает скорость сайта , таким образом объекты загружаются быстрее.
Влияние отложенной загрузки на SEOНе отображается в кэше Google,Поисковая система Google не могут просматривать объекты, которые лениво загрузится. Не уверенны? Вот пример. Если у вас есть какая-либо часть вашего сайта с изображением продукта в нижней части главной страницы и вы активировали отложенную загрузку, то специфическая секция не загружается, пока вы не выделите этот раздел. Следовательно, приводит к не показу исходного кода страницы. Таким образом, он не будет отображаться на кэше Google .
Ленивые загруженные объекты будут убраны прочьОтложенное загруженное содержание не будет индексироваться поисковыми системами. Поскольку это содержимое не индексируется, что, очевидно, приведет к более низкому рейтингу этих объектов. Таким образом, SEO процесс не будет рассчитывать на ленивое загруженное содержимое, чтобы показать в результатах поиска.
Теряет ли оптимизация сайта из-за отложенной загрузки?Это миф! Оптимизация сайта имеет мало общего с отложенной загрузкой. Сценарий Ajax все равно будет выполняться. Единственное отличие состоит в том, что он будет выполняется в фоновом режиме. Сайт будет загружаться быстрее! Нет сомнения в этом! На оптимизацию сайта не влияет.
Как отложенная загрузка может помочь?Отложенная загрузка мешает вам, раздражает ощущение “ожидания”Отложенная загрузка представляет собой механизм, который может привести вас к чему-то, что каждый жаждет – веб-сайт молниеносно. Давайте признаем: мы все нетерпеливы в ожидании содержимого для загрузки. После того, как произошла задержка, даже на несколько секунд, заставит нас выйти из веб-страницы. С отложенной загрузкой, мы не должны ждать загрузки всего содержимого.
Веб-страница загружает гораздо быстрее.Как загрузить меньше ресурсов, которые вам требуется, нет места для ненужной загрузки всего содержимого на веб-странице. Это делает вашу загрузку страницы намного быстрее.
Как вы можете использовать отложенную загрузку в WordPress?При отложенной загрузки содержимого, вы можете избежать отдельного запроса HTTP для каждого изображенияЕсли вы находитесь на странице, которая включает в себя 5 бесплатных и обновляемых полно-экранных , только начальные несколько изображений в посте WordPress будет загружаться, а остальные будут загружаться только если вы прокрутите вниз до нижней части страницы. Таким образом, вы можете предотвратить сайт от отправки запроса HTTP для каждого отдельного изображения. Предотвращение от значительного количества HTTP запросов означает, экономя массу времени для сайта WordPress.
Более быстрый доступ к содержимому на WordPressПри отложенной загрузки на WordPress , вы также можете иметь более быстрый доступ ко всему содержимому. , хотя остается тем же самым, скорость загрузки содержимого увеличивается.
Ненужные загрузки контента можно избежать и много ваших данных тоже могут быть сохранены. Содержание, которым вы обеспокоены, можно наблюдать с помощью прокрутки до конца страницы.
Теперь, когда вы убедились в различных преимуществ, которые есть в отложенной загрузки, можно их реализовать на своем сайте, здесь есть несколько плагинов, которые помогут вам в достижения цели.
Лучшие плагины для отложенной загрузки1. Image Lazy LoadЭтот ленивый плагин загрузки представляет собой легкий взвешенный вариант традиционной ленивой загрузки. Он имеет специальную систему поддержки, которая служит для изображений высокого разрешения с соответствующими сетчатке дисплеев. Плагин Image Lazy Load также включает в себя опции для загрузки изображений на смартфонах путем сжатия числа пикселей, которые достигают вас, прежде чем вы можете просматривать изображения.
2. BJ Lazy LoadЭтот ленивый плагин загрузки позволяет пользователям выбрать в постах изображения и эскизы, Gravatar, фреймы и заменяет содержимое с заполнителем. При выборе конкретного заполнителя вы можете пропустить изображения с разными классами. BJ Lazy Load также обслуживает различные размеры оптимизированных изображений и автоматически служит HiDPI изображениям для различных экранов HiDPI, как у сетчатке отображения Apple.
3.Добавляет Jquery отложенной загрузки различных изображений. Лучшая часть об этом плагине является то, что она очень проста в использовании. Все, что вам нужно сделать, это просто установить его и активировать. Изображения на сайте, которые вы посещаете будет автоматически загружаться, как вы прокрутите вниз до нижней части страницы. Вам не нужно ждать, чтобы изображения загружались в течение длительного времени. Как и при открытии веб-страницы и прокрутите до конца страницы, изображения уже загружены!
– это отказ от загрузки всего контента на странице, когда в этом нет нужды. При этом применяется маркер, сообщающий, что данные не загружены, но в случае необходимости их нужно будет загрузить.
Применяя ленивую загрузку, картинки и прочие материалы на сайте подгружаются асинхронно, а конкретнее, после того, как полностью загрузится видимый фрагмент веб-страницы или исключительно при отображении видимой части окна браузера. Например, если посетитель не до конца проскроллит страницу, то изображения расположенные внизу, не будут загружаться.
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";
- Перевод
- Tutorial
Быстрая и плавная загрузка изображений - это одна из немаловажных составляющих хорошего веб-интерфейса. Кроме того, появляется все больше сайтов, использующие крупные фотографии в дизайне, таким проектам особенно важно следить за корректной загрузкой графики. В этой статье описано несколько техник, которые помогут контролировать загрузку изображений.
Использование контейнера для каждого изображения Простой способ, который можно применить к любому изображению на сайте. Заключается в том, что каждая картинка оборачивается в DIV, который предотвращает построчную загрузку:
С помощью контейнера можно контролировать соотношение сторон картинки, а также использовать индикатор загрузки, что очень удобно, если изображения тяжелые.
Например, чтобы задать соотношение сторон 4:3, можно использовать следующий CSS:
Img_wrapper{
position: relative;
padding-top: 75%;
overflow: hidden;
}
.img_wrapper img{
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
Для того, чтобы изображение отображалось в браузере только после полной подгрузки, необходимо добавить событие onload для изображения и использовать JavaScript, который будет обрабатывать событие:
function imgLoaded(img){
var $img = $(img);
$img.parent().addClass("loaded");
};
Код функции внутри тега HEAD должен быть расположен в самом конце, после любого jQuery или другого плагина. После полной подгрузки изображения его необходимо показать на странице:
Img_wrapper.loaded img{
opacity: 1;
}
Для эффекта плавного появления картинки можно использовать CSS3 transition:
Img_wrapper img{
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 150ms;
-moz-transition: opacity 150ms;
-ms-transition: opacity 150ms;
transition: opacity 150ms;
}
Живой пример этого способа можно .
Используем функцию slideLoaded(), чтобы контролировать процесс:
Function slideLoaded(img){
var $img = $(img),
$slideWrapper = $img.parent(),
total = $slideWrapper.find("img").length,
percentLoaded = null;
$img.addClass("loaded");
var loaded = $slideWrapper.find(".loaded").length;
if(loaded == total){
percentLoaded = 100;
// INSTANTIATE PLUGIN
$slideWrapper.easyFader();
} else {
// TRACK PROGRESS
percentLoaded = loaded/total * 100;
};
};
Подгруженным изображениям присваивается класс loaded, а также отображается общий прогресс. И снова, JavaScript должен быть помещен в конец тега HEAD, после всего остального.
var heroArray = [
"/uploads/hero_about.jpg",
"/uploads/hero_history.jpg",
"/uploads/hero_contact.jpg",
"/uploads/hero_services.jpg"
]
Когда посетитель заходит на сайт, после загрузки главной страницы, начинают загружаться изображения в кэш. Для того, чтобы кэширование не мешало отображению текущего контента, необходимо функционал JavaScript добавить в событие window load:
Function preCacheHeros(){
$.each(heroArray, function(){
var img = new Image();
img.src = this;
});
};
$(window).load(function(){
preCacheHeros();
});
Такой способ улучшает удобство использования сайта, однако дает дополнительную нагрузку на сервер. Это нужно иметь в виду при внедрении подобного функционала. Кроме того, необходимо обязательно учитывать возможные пути посетителей на сайте и кэшировать изображения, расположенные на страницах, которые пользователь вероятнее всего посетит. Чтобы понять такие пути по сайту, необходимо анализировать статистику посещаемости.
Стоит заметить, что URL изображение задано в data-src, а не в src. Это необходимо, чтобы браузер не загружал картинку сразу. Вместо этого в src загружается прозрачный пиксель в GIF, заданный в base64, что уменьшает количество обращений к серверу.
Остается только при нужном событии изменить значение src на data-src. JavaScript позволяет загружать изображения постепенно:
Function lazyLoad(){ var $images = $(".lazy_load"); $images.each(function(){ var $img = $(this), src = $img.attr("data-src"); $img .on("load",imgLoaded($img)) .attr("src",src); }); }; $(window).load(function(){ lazyLoad(); };
Заключение Нет одного оптимального способа для того, чтобы управлять загрузкой изображений на сайте. В каждом конкретном случае необходимо выбирать подходящий метод, а также комбинировать несколько, если это целесообразно. Одними из главных моментов, на которые необходимо обратить внимание - это производительность и трафик. Проще говоря, в первую очередь стоит подумать о том, как будет удобнее пользователю сайта.При работе в Интернете всем хочется, чтобы страницы сайтов загружались как можно быстрее, никому не нравится долго ждать завершения загрузки той или иной страницы. Причём это ожидание может затягиваться весьма существенно в тех случаях, когда изображений на странице великое множество. Присутствие изображений на странице делает страницу более привлекательной для посетителей, увеличивает наглядность и в конечном счёте, способствует повышению посещаемости вашего сайта. Однако приходится считаться с тем, что наличие изображений значительно утяжеляет страницы, увеличивая время их загрузки.
Медленная загрузка страниц отрицательно сказывается на 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 загружаться быстрее. При помощи этих плагинов вы сможете просто творить чудеса. Напишите в комментариях о том, каким плагином для ленивой загрузки изображений вы пользуетесь.