Вернувшись из небольшого отпуска по болезни (не стоит выходить на улицу с мокрой головой) продолжу с небольших “минифишек”.

На страницах современных сайтов, очень часто требуется организовать фотогалерею, слайд шоу, «карусельку» и jQuery для этих целей незаменима.

В одном проекте требовалось создать «слайдер» изображений с разрешением 980×613 пикселей, с автостартом слайдера после загрузки страницы и без особых ограничений на количество изображений.  Средний вес изображения — 150кб.

Конечно же возникло несколько вариантов развития событий:

• Динамическая (ajax) загрузка каждого последующего изображения слайдера
• Загрузка страницы c несколькими первыми изображениями + пост загрузка статики.

Выбираем оптимальное для себя решение.

Динамическая загрузка каждого нового изображения

Здесь все предельно понятно, можно подгружать сами изображения с помощью ajax методом post и формировать html, например:

 $.ajax({ type: "POST",
 url: <image path>,
 enctype: 'multipart/form-data',
 complete: function(){
 // действие после выполнения ajax запроса
 }
 })

Можно с помошью ajax сразу получать html.

В обоих случаях событие complete происходит после успешно выполненного ajax запроса, а при этом изображения еще могут быть не загружены. Убедиться в загрузке изображений поможет следующий код:

 var img = new Image();
 var loader = {
 load: function(imgPath) {
 img.src = imgPath; },
 // проверка загрузки изображения
 check: function() {
 if (img.complete) {
 loader.isload();
 } else {
 img.onload = loader.isload();
 }
 }, isload: function(){
 // изображение загружено
 } }

По моему не совсем оптимально, так как каждый раз выполняется ajax запрос. Это вызывает не нужную нагрузку на веб-сервер и дополнительные расходы браузера. Плюс может нарушаться синхронность смены изображений слайдера, особенно в моменты большой нагрузки на веб-сервер либо проблемах соединения.

Загрузка страницы с несколькими первыми изображениями и пост загрузка статики (без ajax)

Удобство этого варианта в том, что не требуется выполнять ajax запрос. Сначала загружается html c несколькими первыми изображениями, css и js. А по событию ready загружаются оставшиеся изображения, при этом браузер осуществляет запрос только статики.

Этот простой вариант, использует банальную подстановку url-ов изображений в значения атрибутов src для тегов img еще не загруженных изображений.
Серверный скрипт (PHP):

<?php
// ...
$output = "<ul>";
$i = 1;
$j = 3; // количество изображений для начальной загрузки
foreach ($images as $image) {
$attr = $i > $j ? 'img' : 'src';
$output .= "<li><img ".$attr."='".$image['filepath']."' alt='".$image['title']."' title='".$image['title']."'/></li>";
$i++;
}
$output .= "</ul>";
// ...
?>

Получам следующий html:

<div id="slider">
<ul style="width: 6860px; margin-left: 0px;">
<li><img title="Image1" alt="Image1" src="/images/image1.jpg"></li>
<li><img title="Image2" alt="Image2" src="/images/image2.jpg"></li>
<li><img title="Image3" alt="Image3" src="/images/image3.jpg"></li>
<li><img title="Image4" alt="Image4" img="/images/image4.jpg"></li>
<li><img title="Image5" alt="Image5" img="/images/image5.jpg"></li>
<li><img title="Image6" alt="Image6" img="/images/image6.jpg"></li>
<li><img title="Image7" alt="Image7" img="/images/image7.jpg"></li>
</ul>
</div>

У последних изображений вместо атрибута src атрибут img.
И к примеру такой css:

#slider{
width:980px;
height:613px;
position:relative;
overflow: hidden;
}
#slider ul {
position: absolute;
}
#slider ul li {
float: left;
height: 613px;
list-style-image: none;
list-style-type: none;
width: 980px;
position: relative;
}

Вариант удобен тем, что позволяет использовать готовые jQuery плагины. Собственно так может выглядеть js:

$(function() {
// функция замены атрибута img на src
var changeAttr = function(){
$("#slider ul li img[img]").each(function(){
$(this).attr("src",$(this).attr("img")).removeAttr("img");
})
}
// подключаем slider плагин
// который каждые n секунд уменьшает значение margin-left у тега ul
$("#slider").slider({
// свойства плагина
});
// устанавливаем паузу 2 сек, после чего заменяем атрибуты img на src
setTimeout(function(){
changeAttr()},
2000);
})

Этот вариант мне как-то больше понравился и он достаточно четко работает, даже без проверки загрузки изображений. Загружать можно не все оставшиеся изображения, а частями. А если все таки нужно убедиться в полной загрузке картинок, то можно использовать код выше перед выполнением анимации «слайдера». При использовании nginx в качестве фронтенда, можно значительно ускорить получение статики.