Вернувшись из небольшого отпуска по болезни (не стоит выходить на улицу с мокрой головой) продолжу с небольших “минифишек”.
На страницах современных сайтов, очень часто требуется организовать фотогалерею, слайд шоу, «карусельку» и 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 в качестве фронтенда, можно значительно ускорить получение статики.