Как создать прелоудер(предзагрузку) изображений

Опубликовано: 3 Май 2011Автор ratemir

Очень часто, требуется некоторое время для загрузки изображений. Особенно, если они большого размера, а скорость соединения оставляет желать лучшего. Чтобы отвлечь посетителей сайта от белых экранов не загруженных фото, используют значки предзагрузки, которые появляются до загрузки изображения и исчезают после. Эта техника может значительно увеличить производительность вашего сайта. Данный скрипт работает во всех браузерах и его размер всего 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: Рольставни могут быть различных видов, свойств и характеристик, отличаться внешним видом и применяемыми при изготовлении материалами. Но цель рольставень одна — обеспечение безопасности. Установив наши рольставни Вы не только обеспечиваете максимальную безопасность Вашего дома но и одновременно приобретаете современный декоративный компонент для окон.

Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх