Очень часто, требуется некоторое время для загрузки изображений. Особенно, если они большого размера, а скорость соединения оставляет желать лучшего. Чтобы отвлечь посетителей сайта от белых экранов не загруженных фото, используют значки предзагрузки, которые появляются до загрузки изображения и исчезают после. Эта техника может значительно увеличить производительность вашего сайта. Данный скрипт работает во всех браузерах и его размер всего 2кб.
Если вы еще не знакомы с этим методом, Вам повезло! Сегодня мы создадим предзагрузку(или прелоудер от англ. preload) на jQuery, для Ваших проектов. Давайте начнём!
Шаг 1: HTML разметка
<div id="container"> <ul id="gallery" class="clearfix"> <li><p><a href="#"><img src="images/1.jpg" /></a></p></li> <li><p><a href="#"><img src="images/2.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/3.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/4.jpg" /></a></p></li> <li><p><a href="#"><img src="images/5.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/6.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/7.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/8.jpg" /></a></p> </li> <li><p><a href="#"><img src="images/9.jpg" /></a></p> </li> </ul> </div>
Ничего сложного здесь нет: простой код HTML для простой галереи. В контейнер <div> мы добавили неупорядоченный список <li>, который в свою очередь будет содержать список элементов, в виде изображений. Нужно отметить, что, дополнительные теги <p> будут использованы в стилях CSS для придания красоты изображениям(для рамки), а так они важной роли не играют и их можно удалить если хотите.
Шаг 2: CSS
Теперь мы создадим файл стилей или закинем ниже лежащие строчки в уже существующий на Вашем сайте. Главное, обратите внимание на класс .preloader с помощью которого подгружается значок и не забудьте прописать к нему правильный путь.
#container { width:960px; margin:0px auto; } #gallery { list-style:none; } #gallery li { background:#e8e8e8; float:left; display:block; border:1px solid #d7d7d7; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:1px 1px 6px #ddd; -moz-box-shadow:1px 1px 6px #ddd; box-shadow:1px 1px 6px #ddd; margin:15px 56px; padding:0; } #gallery li p { border:1px solid #fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin:0; padding:7px; } #gallery li a { display:block; color:#fff; text-decoration:none; padding:0; } #gallery img { width:315px; height:210px; margin:0; padding:0; } .preloader { background:url(i/89.gif) center center no-repeat #ffffff; display:inline-block; }
В классе .preloader элемент display должен иметь значение block или inline-block , в противном случае значок предзагрузки не будет отображаться.
Нужную картинку для прелоудера можно найти в интернете на любой вкус. Существует множество сайтов для этой цели, например http://www.preloaders.net
Шаг 3: Создание плагина jQuery для предзагрузки
Мы укажем только самые важные составляющие скрипта. Давайте начнем с создания структуры плагина и параметров предзагрузки. Учитывая параметры настройки, плагин становится более гибким в управлении.
// JavaScript Document $.fn.preloader = function(options){ var defaults = { delay:200, preload_parent:"a", check_timer:300, ondone:function(){ }, oneachload:function(image){ }, fadein:500 }; // variables declaration and precaching images and parent container var options = $.extend(defaults, options), root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
delay: Последовательная задержка между появлением изображений
preload_parent: К указанному тегу добавляется класс предзагрузки preload. Если даже тег не найден, то он будет установлен автоматически перед тегом <img>.
fadein: Продолжительность анимации одной картинки.
Далее, мы осуществляем в своём роде кэширование переменных, которые мы будем использовать в остальной части плагина. Есть две вещи которые стоит отметить. Вы могли бы с самого начала пойти простым путём, то есть скрыть изображение, а затем инициировать медленное его появление и не использовать весь этот код. Однако, проблема в том, что, если мы скрываем изображения, то браузер понимает это, как не используемое пустое место, следовательно всё это отображается на верстке. Можно, конечно, прописать в свойстве opacity: «show» или «hide» . Всё бы хорошо, правда некоторые версии браузеров IE этого не понимают.
images.each(function(){ var $this = $(this); if( $this.parent( options.preload_parent ).length==0 ) { $this.wrap("<a class="preloader"></a>"); } else { $this.parent().addClass("preloader"); } checkFlag[i++] = false; }); images = $.makeArray(images);
Данная часть скрипта будет перебирать каждый тег стоящий перед <img> и искать наличие соответствия с указанными нами опциями в preload_parent. Если нужный параметр найден, то мы добавляем <a class='preloader' /> если нет тогда обёртываем изображение тегом с классом preloader.
var icon = jQuery("<img alt="" />", { id: 'loadingicon', src: 'css/i/89.gif' }).hide().appendTo("body"); timer = setInterval(function () { if (icon[0].complete == true) { clearInterval(timer); init(); icon.remove(); return; } }, 100);
Сначала мы создаем изображение объекта с помощью id: 'loadingicon' , и в src: , указываем путь загрузки иконки. Затем, мы добавим его в body , и для начала скроем(hide ()) это. Далее, проверяем была ли загружена иконка или нет. Если это так, начинаем предварительную загрузку изображений.
Чтобы установить предзагрузку на свой сайт нужно скачать файл и прописать в <head> следующие строчки:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script type="text/javascript" src="js/jquery.preloader.js"></script> <script type="text/javascript"> $(function(){ $("#gallery").preloader(); }); </script> <link rel="stylesheet" href="css/preloader.css" type="text/css" />
PS: Рольставни могут быть различных видов, свойств и характеристик, отличаться внешним видом и применяемыми при изготовлении материалами. Но цель рольставень одна — обеспечение безопасности. Установив наши рольставни Вы не только обеспечиваете максимальную безопасность Вашего дома но и одновременно приобретаете современный декоративный компонент для окон.
