• 14923
  • 35
  • 2
Нравится блог?
Подписывайтесь!

Простая пост загрузка изображений с jQuery

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

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

     
8 мая 2011, 0:06
1650

Loading...

Комментарии

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

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Маргулан Сейсембаев: «Обучая детей в Англии, мы ментально растим граждан другой страны»

Маргулан Сейсембаев: «Обучая детей в Англии, мы ментально растим граждан другой страны»

Они становятся «не казахстанцами. Центром их жизненных интересов становится другая страна и другая культура, не Казахстан. Они просто не видят себя в нашей стране, не хотят возвращаться и по сути мы...
Zhumanova
вчера / 11:35
  • 12600
  • 7
Архивные фотографии Алма-Аты из семейного альбома. Ностальгический пост

Архивные фотографии Алма-Аты из семейного альбома. Ностальгический пост

Насобирал разных фотографий про наш город, из семейного архива. Фотографии не от сканированные, а пересняты на телефон. Давно хотел выставить, но не решался) Сейчас уже мы все поменялись, уже...
Ispanec
22 ақп. 2017 / 11:05
  • 13229
  • 26
В больнице пара бахил стоит 50 тенге, а оптом 4 тенге. Чувствуете разницу?

В больнице пара бахил стоит 50 тенге, а оптом 4 тенге. Чувствуете разницу?

Получается, цены на бахилы не повышались, а кто-то повысил их самовольно. Я думаю, что на этом пытаются заработать. Позже я нашла ещё одну удивительную штуку:) Упаковка бахил в количестве 50 пар...
killer_slova
26 ақп. 2017 / 9:15
  • 8139
  • 33
«Ау, дорогой, проснись! 21 век на дворе давно!». Бездипломный-безработный-бесквартирный!

«Ау, дорогой, проснись! 21 век на дворе давно!». Бездипломный-безработный-бесквартирный!

Ну реально же, парни, откуда вы только беретесь такие простые, а? Я сейчас просто расскажу несколько историй из личного опыта, и судите сами – нормально это? Но для начала расскажу немного о себе...
socium_kzo
22 ақп. 2017 / 11:38
Трамвайные пути Алматы ни в коем случае нельзя убирать, это окончательно уничтожит трамвай

Трамвайные пути Алматы ни в коем случае нельзя убирать, это окончательно уничтожит трамвай

В Алматы было сделано несколько заявлений касательно ситуации с трамваем, опять же не в пользу его восстановления и возвращения на улицы города. В городе собираются демонтировать рельсы...
SKYFALL
24 ақп. 2017 / 16:01
  • 7880
  • 5
О Димаше. Как же люди не поймут, что эстрада – это уныло, пафосно и скучно

О Димаше. Как же люди не поймут, что эстрада – это уныло, пафосно и скучно

Сплошные преувеличенные восторги в ленте фейсбука меня не удивляли. Нет пророка в своем отечестве, кумиром Димаш Кудайбергенов стал только после своего успеха в Китае. А представьте себе его...
myma
вчера / 10:45
Диана Шурыгина – жертва или змея? Девочка красивая, а весь мир судит её именно за это

Диана Шурыгина – жертва или змея? Девочка красивая, а весь мир судит её именно за это

Я совсем не смотрю передачу "Пусть говорят", слишком много ругани и негатива, но новость про какую-то девушку заполонила все мои социальные сети, я открыла youtube и посмотрела несколько передач...
Roza_pvl
22 ақп. 2017 / 11:49
  • 6680
  • 34
Замуж в 27. Это как отправиться на войну, но без оружия

Замуж в 27. Это как отправиться на войну, но без оружия

Я очень долго думала писать данный пост или нет. Потому, что тема очень тонкая, возможно кого-то может задеть, а, возможно, наоборот кому-то откроет глаза. Тема замужества в каждом поколении была и...
Adilyan
21 ақп. 2017 / 20:22
  • 4269
  • 20
Диана Шурыгина как один из PR-инструментов продвижения своего товара и бренда

Диана Шурыгина как один из PR-инструментов продвижения своего товара и бренда

Простому обывателю социальных сетей уже известно, что самой обсуждаемой персоной в последнее время является печально известная 16-ти летняя девушка из Ульяновска Диана Шурыгина.
tala03
21 ақп. 2017 / 13:27
  • 3964
  • 15