Дизайн интерфейса больше не будет создавать вам сложности, после того, как вы поймете основу. Нужно будет немного попрактиковаться, прежде чем вам станет удобно использовать фрагменты кода и правильно создавать изображения. Тем не менее, данный плагин может похвастаться невероятной поддержкой среди популярных веб-браузеров. Не говоря уже о популярности среди пользователей, у кого до сих пор низкая скорость соединения с интернетом. Плагин для организации ленивой загрузки позволит вам повысить производительность сайта и опыт взаимодействия с пользователями в целом.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Приступаем
Мы создаем обычную HTML5-разметку при помощи некоторых базовых скриптов. Кроме того, мы сохранили копию последней библиотеки jQuery вместе с копией плагина Unveil.js. Вы можете скачать с репозитория GitHub, который включает полноценный js-файл с минимизированным скриптом.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Lazy-Loading Images with Unveil.js</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.unveil.min.js"></script>
</head>Кроме этих основных javascript-файлов, у нас также есть стили веб-страницы, которые расположены внутри файла style.css. Здесь представлены нужные сбросы, шрифты и другое… Общая разметка страницы очень простая, так как мы просто демонстрируем скорость загрузки плагина. Этот скрипт отлично подходит для разработки минималистских веб-сайтов, потому что они практически не влияют на скорость работы.
Есть парочка других элементов, которые следует обсудить по поводу тела страницы. Нам нужно понимать, как составлять код HTML5-изображений, чтобы в определенных атрибутах были указаны соответствующие значения. К тому же, нам нужно убедиться, что jQuery-код работает правильным образом. Мы добавили этот блок в самый низ страницы, так как для него требуется всего одна строка кода. Но вы можете расположить этот код где угодно в разметке, и даже поместить в ваш файл более одного JS-кода.
Добавляем HTML-изображения
Плагин Unveil использует HTML5-атрибуты данных для правильной загрузки изображений. В нашем примере изображения ссылаются обратно на исходник в Dribbble. Тем не менее, вы можете просто расположить тег img где угодно в разметке, и получить тот же результат. Существует 3 атрибута, которые используются наиболее часто, и в нашем коде используются 2 из них.
<h1>Unveil.js Lazy-Load Demo</h1>
<p>The Unveil.js plugin is based off <a href="http://www.appelsiini.net/projects/lazyload">Lazyload</a> with similar features and functionality. This is a brief demo to showcase what is possible using the Unveil plugin.</p>
<div id="imagecontent">
<!-- image source http://dribbble.com/shots/1105391-New-Project -->
<p><a href="http://dribbble.com/shots/1105391-New-Project"><img src="images/loader.gif" data-src="images/new-project-screenshot-dribbble.png"></a></p>
<!-- image source http://dribbble.com/shots/1105089-Mobile-operator-application -->
<p><a href="http://dribbble.com/shots/1105089-Mobile-operator-application"><img src="images/loader.gif" data-src="images/mobile-operator-iphone-app.png"></a></p>Обычный атрибут img src должен указывать на анимацию, отображающую загрузку. Это может быть стандартная заглушка, либо просто пустое gif-изображение. В любом случае, вам вряд ли захочется использовать стандартное изображение. Вместо этого вы можете использовать URL до обычного изображения в атрибуте data-src.
Нам так нравится этот плагин, потому что он поддерживает даже устройства с экранами retina. Не только мобильные смартфоны или планшеты, но и современные ноутбуки, в которых установлены экраны высокого разрешения. У вас должны быть изображения с двойным разрешением (@2x), а также включать URL до нового атрибута data-src-retina. Учтите, что мы этот подход не используем, так как мы уже включили размер @2x в качестве стандартного scr. Но функционал просто великолепен, и им невероятно просто пользоваться.
Активируем Unveil.js
Нам захотелось пропустить этап с CSS, так как там нет ничего особенного. Мы просто выставляем настройки позиционирования в разметке и сбросы стандартных настроек браузера, но нет ничего, связанного со скриптом. Давайте лучше перейдем прямо к концу нашего документа и укажем коды скрипта сразу перед закрывающим тегом body.
<script type="text/javascript">
$(function(){
$("img").unveil();
});
</script>jQuery-селектор определяет каждый тег img на странице и запускает основную функцию плагина unveil(). Она подгружает исходный src-атрибут в качестве первого изображения, а затем заменяет его, так как пользователь прокручивает страницу вниз. Также существуют некоторые опции, которые вам возможно захочется использовать в функции для обновления настроек. Например, любое цифровое значение, введенное в параметр, будет обновлять расстояние в пикселях на основе того, сколько осталось до загрузки следующих изображений.
$("img").unveil( 200 );Вот пример, который мы взяли прямо с репозитория GitHub. Вы можете наглядно видеть, что в скрипт по прошествии времени добавляются новые параметры. Тем не менее, нам кажется, что на данный момент Unveil представляет собой очень мощный плагин для веб-разработчиков. Ленивая загрузка изображения не требует полного набора опций для корректной работы. Но вам также следует ознакомиться с нашим живым демо, чтобы понять, каким образом плагин можно использовать на сайте.
В завершение
Мы надеемся, что данное руководство может значить многое для веб-разработчиков. Существует множество техник, которые требуют практики и нечасто можно найти время на то, чтобы разрабатывать скрипты вручную. Тем не менее, функционал ленивой загрузки довольно несложно реализовать, и применение Unveil.js позволит существенно сократить временные затраты.
