Ленивая загрузка как подключить html. Отложенная загрузка изображений — плагины Lazy Load для WordPress
– это отказ от загрузки всего контента на странице, когда в этом нет нужды. При этом применяется маркер, сообщающий, что данные не загружены, но в случае необходимости их нужно будет загрузить.
Применяя ленивую загрузку, картинки и прочие материалы на сайте подгружаются асинхронно, а конкретнее, после того, как полностью загрузится видимый фрагмент веб-страницы или исключительно при отображении видимой части окна браузера. Например, если посетитель не до конца проскроллит страницу, то изображения расположенные внизу, не будут загружаться.
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";
«Ленивая загрузка» - это программный плагин 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);
});
На сегодня все! Спасибо за внимание.
Изображения на страницу загружаются двумя основными способами: посредством
тега HTML
и с помощью CSS свойства background-image
. Поэтому мы
сначала посмотрим на пример с тегом, а потом перейдем к рассмотрению фоновых
изображений CSS
.
Начнем с простой HTML разметки для вставки изображений на страницу.
Разметка для лениво загружаемых изображений практически такая же.
Второй шаг заключается в том, чтобы избежать преждевременной загрузки изображения. Браузер использует атрибут src тега img для запуска загрузки изображения. И не имеет значения, является ли это изображение первым или тысячным по счету. Если браузер находит атрибут src в разметке, он немедленно запускает загрузку изображения, даже, если оно находится за пределами области видимости.
Для того чтобы отложить загрузку изображения, нужно поместить URL адрес изображения в атрибуте отличном от атрибута src, допустим в data-src. И так, как атрибут src пустой, то и браузер не будет загружать данное изображения.
Теперь, так как мы предотвратили загрузку изображения стразу, нам необходим, какой-то способ сообщить браузеру, когда данное изображение надо загрузить. Иначе, это никогда не случится. Для этого, мы проверяем находиться ли изображение (в нашем случае, его заменитель – серый прямоугольник) в видимой области, и затем загружаем его.
Существуют два способа, как определить нахождение изображения в области видимости. Давайте посмотрим на каждый из этих примеров через их коды.
Первый метод. Запуск загрузки изображения, используя события JavaScript
В этом методе используются обработчики для следующих событий: scroll, resize и orientationChange. Событие прокрутки (scroll ) определяет текущее положение пользователя на странице, когда он перематывает ее. События resize и orientationChange важны в одинаковой степени. Событие resize возникает, когда изменяется размер окна браузера, а событие orientationChange вызывается, когда ориентация устройства меняется с ландшафтного на портретный режим и обратно.
Эти три события мы будем использовать для определения изменений экрана и вычисления количества изображений, которые должны отобразиться на экране. После всего этого мы будем загружать их.
Когда какое-либо из этих событий появляется, мы находим все изображения на странице, которые еще не загружены. Из этих изображений мы выбираем именно те, которые находятся в видимой области браузера. Выбор делается на основе расчетов верхнего смещения изображения, текущего верхнего положения документа и высоты окна. Поэтому, если изображение появилось в окне просмотра, мы выберем его URL-адрес из атрибута data-src и переместим его в атрибут src , после этого браузер загрузит изображение.
Обратите внимание, что мы через JavaScript выбираем все изображения, у которых есть класс lazy . Как только изображение загрузится, мы удалим этот класс, потому что нам больше не нужно запускать событие. А как только все изображения будут загружены, мы удалим все обработчики событий.
Не забывайте, что, когда мы перематываем страницу, событие прокрутки запускается много раз. Таким образом, для улучшения производительности мы добавляем небольшой тайм-аут к нашему скрипту, который регулирует выполнение ленивой загрузки, поэтому он не блокирует другие задачи, запущенные в том же потоке в браузере.
Вот рабочий пример этого подхода:
Таким образом, в данной статье мы обсудили первый метод ленивой загрузки изображения, а в следующей статье мы обсудим другой метод.
Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе WordPress, аналогичный DLE, Drupal, Prestashop и другим популярным CMS.
Немного теорииТы что ещё не в курсе? Ленивая или отложенная загрузка (от английского lazy load) это технология позволяющая загружать только те изображения на странице, которые в данный момент нужны пользователю. Результат внедрения — ускорение загрузки страницы, довольный посетитель и увеличение конверсии.
Все заметили как вконтакте быстро грузится!?
Пример из жизниПредставь что у тебя на странице около 200 изображений (это может быть страница категорий в интернет магазине или раздел фотогалереи или даже запись в блоге). Пусть каждое изображение размером 250 на 250 пикселей и весит 50 Кб. Итого получаем почти 10 мб изображений (200 шт * 50 кб = 10’000 кб) и 200 запросов к серверу.
Зачем нагружать пользователя таким количеством информации сразу? Давай покажем ему только первые 8 изображений, а остальные по мере того как они ему понадобятся. Загрузка страницы в этом случае пройдёт в разы быстрее. Кроме того, большинство твоих пользователей вообще не будут скролить страницу до конца. Им будет достаточно этих 8 уже загружённых изображений!
Отличный пример реализации ленивой загрузки:
Wildberries это сайт с ежедневной милионной посещаемостью Представляешь себе нагрузку на сервер?
Внедрение (установка) ленивой загрузкиУстановить ленивую загрузку на своём сайте может каждый и ты тоже, достаточно поэтапно выполнить следующие шаги:
2. Загрузи файлы из архива на свой сервер, например в корень твоего сайта, чтобы файлы были доступны ссылке вроде tvoisite.ru/js/jquery.js
3. Подключи эти файлы в шаблон (для WordPress это файл header.php, а для DLE это main.tpl), а сразу после них вставь код. У тебя должно получиться нечто похожее на это:
$(function() { $("img").lazyload({ failurelimit: 10, threshold: 150, placeholder: "/img/dot.gif", effect: "fadeIn" }); });
Эти строчки нужно включить до элемента
4.
Чтобы картинка сразу не загружалась, надо для всех изображений которые мы хотим лениво загружать, заменить
на
5. Готово! Но ты должен настроить этот скрип под себя, вот параметры которые ты можешь настроить:
- failurelimit: 10 — скрипт останавливает поиск после того, как обнаружит 10 изображений на странице. Если у твоей страницы достаточно сложная разметка, то укажи здесь число побольше.
- threshold: 150 — порог открытия изображения. Если установить значение 0, то изображение начнёт загружаться только в тот момент когда появится на странице. В нашем случае изображение начнёт загружать заранее, т.е. за 150 пикселей до появления в зоне видимости.
- placeholder: «/img/dot.gif» — путь к фоновой картинке, которая будет отображаться пока не загрузится само изображение. Здесь можно установить какую-нибудь анимацию загрузки.
- effect: «fadeIn» — эффект появления графического элемента.
Я использую технологию отложенной загрузки в двух своих интернет магазинах. Это позволяет мне экономить ресурсы сервера, а так же не заставлять пользователя томится в ожидании полной загрузки страницы. В своё время с помощью этой технологии Я уменьшил скорость загрузки своего интернет магазина с 6 до 2 секунд. Только вдумайтесь: в три раза быстрее!
А ты используешь ленивую загрузку?
Хороший сайт должен грузиться быстро. Этот момент стоит учитывать и при создании сайтов, и при анализе и оптимизации уже существующих сайтов. При загрузке страниц интернет-проекта посетители не любят слишком долго ждать.
В этой статье мы поговорим об «ускорении» загрузки сайта при помощи «отложенной загрузки изображений» на Javascript, приведем примеры реализации для известных framework ов mootools и jQuery. Это особенно актуально для сайтов, которые используют изображения высокого качества (новостные порталы, сайты, посвященные фотографии, дизайну, клипарту, социальные сети, объемные блоги и т.п.)
Отложенная загрузка изображений при помощи javascript с использованием mootools, jQueryКакие неприятности нас ожидают во время загрузки изображений? При обычной загрузке изображения, если встречается битое или отсутствующее изображение, или картинка загружается с другого источника, или картинка «слишком медленно» грузится – сайт «подвисает».
Его загрузка не продолжится до тех пор, пока мы не получим текущее изображение, или не истечет минутный timeout. Что же видит посетитель? Зачастую – ничего, просто белый экран, или обрывочную часть сайта. Будет ли он терпеть такую «выходку» сайта и вернется ли когда-нибудь снова?
При помощи отложенной загрузки изображений мы можем этого избежать. И при этом изображения при способе «отложенной загрузки» грузятся асинхронно, в произвольном порядке, после полной загрузки основного содержимого сайта, давая возможность посетителю приступить к чтению и просмотру интересующей его информации. Визуально глазами посетителя это существенно «ускоряет» загрузку страницы.
Идея отложенной загрузки изображений на javascriptИдея, в общем-то, простая. Есть такое событие в javascript «domready» . Которое наступает во время получения полной структуры html документа и еще до полной загрузки страницы. Так вот, после наступления этого события мы получаем список нужных изображений , «сбрасываем» атрибут src каждой картинки, устанавливая для него значение, например, анкор: #. Src же изображения сохраняем в отдельном атрибуте изображения, например, longDesc . Скрываем картинку , назначая css правило: visibility: hidden .
После полной загрузки страницы по событию window.onload каждой картинке «возвращаем» её родной атрибут src (что, по сути, вызывает «загрузку» оригинального изображения). Картинки одна за другой начинают «появляться» на странице.
Усовершенствуем идею отложенной загрузкиА что если загружать отложено только те изображения, которые видит посетитель. В видимой части экрана? И по мере надобности, когда посетитель воспользуется кнопкой scroll а, догружать остальные?
Что же еще? Было бы хорошо визуально для посетителя показать , что на странице что-то происходит. Например, что отложенные изображения грузятся . Для этого достаточно вставить некий элемент span сразу после изображения , назначить ему css класс preloader и в рамках css стилизовать элемент .
После чего назначить background ом тематическое интуитивно понятное динамическое изображение загрузки , скажем, в формате gif. Теперь после полной загрузки текущего изображения по наступлению события объекта image onload удалить элемент span.preloader и отобразить само изображение , присвоив картинке css правило: visibility: visible;
Реализация отложенной загрузки изображений на JavascriptА вот здесь всплывает проблема номер один. Это удивительно! Но до сих пор ни один браузер не поддерживает нормально у объекта image событие onload! Событие наступает стихийно.
Изображения в итоге то появляются, то не появляются вовсе, причем даже то же самое изображение во время разных загрузок одной и той же страницы: событие может вовсе не происходить, или происходит раньше, до полной загрузки картинки.
Эмуляция события onload для объекта ImageИтак, подумав, мы пришли к выводу, что изображение считается загруженным только тогда, когда у него атрибуты длинна и высота: width, height становятся отличными от 0 . Но здесь, как обычно, обрадовал Internet Explorer, который при неудачной попытке загрузить изображение «подставляет» вместо него свое «по умолчанию» с красным крестиком, у которого тоже есть длинна и высота.
Исследовав дальше свойства объекта image, мы обнаружили, что нужно также проверять свойство complete – которое показывает, было ли изображение загружено полностью. Кроме этого обрадовали Safari, Google Chrome, построенные на движке Webkit, по их мнению было ли изображение загружено или нет – без разницы, complete всегда true.
Так что приходится обрабатывать для каждого изображения события onerror, onabort , и в случае их возникновения (при ошибке загрузки), присваивать атрибутам width, height изображения 0 значение. Итак, в итоге мы проверяем эти три свойства объекта image через определенный интервал времени.
Как только complete = true, а width, height отличны от 0 – изображение загружено полностью и не является битым. Но, чтобы не «плодить» бесконечные интервальные события, мы определим максимальное число времени, через которое отменим интервальное событие проверки для текущего изображения, будем считать, что изображение получить невозможно, и скроем объект его загрузки.
А также разобьем все изображения на две группы, те, которые находятся в видимой области экрана посетителя, их же мы добавим к загрузке сразу после полной загрузки страницы, и те, которые находятся в невидимой области экрана, эти изображения мы загрузим при наступлении события onscroll – когда посетитель воспользуется scroll ом мышки.
Реализация отложенной загрузки изображений на Mootools и jQueryПозвольте Вам привести два исполнения отложенной загрузки изображений на Mootools и jQuery.
Mootools 1.1 – 1.4.4:
/** delayed image load by Black#FFFFFF **/ loadWait = 30000; loadCheck = 300; preloadObjects = "img"; notImagesLoaded = ; excludeImages = false; //excludeImages = "exclude" function getScreenHeight(){ var myHeight = 0; if(typeof(window.innerHeight) == "number") { //Non-IE myHeight = window.innerHeight; } else if(document.documentElement && (document.documentElement.clientHeight || document.documentElement.clientHeight)){ //IE 6+ in "standards compliant mode" myHeight = document.documentElement.clientHeight; } else if(document.body && (document.body.clientHeight || document.body.clientHeight)) { //IE 4 compatible myHeight = document.body.clientHeight; } return myHeight; } function preloadOther(){ var l = notImagesLoaded.length; var currentExists = false; for(var i = 0; i < l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; window.removeEvent("scroll",preloadOther); }; }; function imagesPreloader(){ $$(preloadObjects).each(function(item){ if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; var preloaderElt= new Element("span",{ styles:{"display":"inline-block"}}); $(preloaderElt).className = "preloader "+item.className; preloaderElt.inject(item,"before"); loadImage(item); }; }); window.addEvent("scroll",preloadOther); }; function loadImage(item){ var pos = $(item).getPosition(); var ItemOffsetTop = typeof pos == "object" && typeof pos.y != "undefined" ? pos.y: 0; var documentScrollTop = $(window).getScrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ $clear(this.storePeriod); this.storePeriod = false; if(typeof this.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; $(this).setStyles({"display":"none","visibility":"hidden"}); if(typeof $(this.previousSibling).destroy == "function"){ $(this.previousSibling).destroy(); } else { $(this.previousSibling).remove(); } } }.periodical(loadCheck,item); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; $(window).addEvent("domready",imagesPreloader);
jQuery 1.3.2 – 1.7.1:
/** delayed image load by Black#FFFFFF **/ loadWait = 30000; loadCheck = 300; preloadObjects = "img"; notImagesLoaded = ; excludeImages = false; function getScreenHeight(){ var myHeight = 0; if(typeof(window.innerHeight) == "number") { //Non-IE myHeight = window.innerHeight; } else if(document.documentElement && (document.documentElement.clientHeight || document.documentElement.clientHeight)){ //IE 6+ in "standards compliant mode" myHeight = document.documentElement.clientHeight; } else if(document.body && (document.body.clientHeight || document.body.clientHeight)) { //IE 4 compatible myHeight = document.body.clientHeight; } return myHeight; } function preloadOther(){ var l = notImagesLoaded.length; var currentExists = false; for(var i = 0; i < l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; jQuery(window).unbind("scroll",preloadOther); }; }; function imagesPreloader(){ jQuery(preloadObjects).each(function(){ var item = this; if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; item.alt = ""; var preloaderElt= jQuery(""); jQuery(preloaderElt).css({"display":"block"}); preloaderElt.className = "preloader "+item.className; jQuery(item).before(preloaderElt); loadImage(item); }; }); jQuery(window).bind("scroll",preloadOther); }; function loadImage(item){ var pos = jQuery(item).position(); var ItemOffsetTop = typeof pos == "object" && typeof pos.top != "undefined" ? pos.top: 0; var documentScrollTop = jQuery(window).scrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ clearInterval(item.storePeriod); item.storePeriod = false; if(typeof item.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; jQuery(item).css({"display":"none","visibility":"hidden"}); jQuery(item.previousSibling).remove(); }; },loadCheck); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; jQuery(document).ready(imagesPreloader);
Примеры внедрения отложенной загрузки изображений на javascriptПримечание: для использования в режиме совместимости с jQuery.noconflict() все вхождения знака $ заменены на передачу параметров объекту jQuery
Настройки javascript:
Настройки css:
Для стилизации элемента, который отображает загрузку изображения, используется класс
Span.preloader { display: block; background: url(путь к изображению загрузки); }
Здесь Вы сможете стилизовать элемент, который будет отображаться «вместо» изображения до полной его загрузки, как Вам будет угодно. А также этому элементу span.preloader будет присвоен дополнительный класс, соответствующий классу изображения, что упростит формирование css стилей.
Пояснение: это значит, что если у изображения, добавленного в очередь отложенной загрузки, класс class=”bigImage” , то у «заглушки» span.preloader , которая будет «визуализировать» процесс загрузки, соответственно класс class=”preloader bigImage” , по сути, к заглушке будут применяться все те правила, которые будут назначены для изображения. В итоге при отложенной загрузке изображений вид страниц сайта остается неизменным.
В каких браузерах тестировалась отложенная загрузка?IE 7,8,9, Firefox 3.6 – 10, Opera 11.61, Safari, Chrome последние
Как убедиться в том, что «отложенная загрузка» действительно работает? И загружает изображения точно после загрузки страницы?Даже невооруженным глазом после установки нашего решения Вы заметите, что сайт начал «грузиться» быстрее, а указанные для отложенной загрузки изображения «грузятся» только после полной загрузки текущей страницы.
Но, чтобы окончательно убедиться, загрузите, например, браузер Opera, откройте один из примеров и обратите внимание на то, что после полной загрузки страницы и при скроллинге вниз у Вас в строке состояния браузера (адресной строке) во время прокрутки визуально отображается загрузка изображений (меняется счетчик запрашиваемых изображений).
Будет ли версия отложенной загрузки на чистом javascript без использования jQuery, Mootools?Да, но она требует написания и тестирования дополнительных функций, так что появится немного позже.