• 15331
  • 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
1696

Загрузка...
Loading...

Комментарии

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

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

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

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

«Алматы – город, летящий под откос», или Кто заказал утку у российского блогера

«Алматы – город, летящий под откос», или Кто заказал утку у российского блогера

Некий блогер Сергей Никитский неустанно пишет о Казахстане, Астане, Экспо и посвящает два материала Алматы, причём подчёркнуто называет город Алма-Ата.
Langdon
19 июля 2017 / 15:44
  • 3737
  • 58
«Язык мой – враг мой», или 7 причин никогда не разговаривать с полицией

«Язык мой – враг мой», или 7 причин никогда не разговаривать с полицией

На этот раз пост очень важный и необходим к прочтению каждым! Не поленитесь и уделите время прочтению. Ни в коем случае, не разговаривайте с полицейскими до прихода вашего адвоката!
asselsabekova
18 июля 2017 / 14:19
  • 3467
  • 32
Один из способов выиграть суд против коллекторов

Один из способов выиграть суд против коллекторов

Сегодня в своем посте я постараюсь рассказать, как выиграть суд против некоторых коллекторских компании в нашей стране. Чем отличается коллекторское агенство от обычного банка?
Advokot
18 июля 2017 / 15:31
  • 3109
  • 10
Что происходит в казахстанской правоохранительной системе под видом борьбы с коррупцией

Что происходит в казахстанской правоохранительной системе под видом борьбы с коррупцией

За день до своей гибели прямо около памятника жертвам политических репрессий 1937-го Жампозов сказал жене, что он – жертва точно таких же репрессий.
openqazaqstan
вчера / 10:18
  • 2607
  • 9
Книга, которая сэкономит вам 150 тысяч долларов и два года жизни

Книга, которая сэкономит вам 150 тысяч долларов и два года жизни

Автор утверждает, что программы МБА не дают никакого позитивного выхлопа, если ты уже не являешься владельцем или наследником прибыльного бизнеса. Знания МБА можно получить бесплатно, уверяет он.
Aks_Ras
19 июля 2017 / 16:28
  • 2771
  • 2
Госорганы, ответственные за жизни детей, хранят молчание. У них в отчетах все хорошо

Госорганы, ответственные за жизни детей, хранят молчание. У них в отчетах все хорошо

Вчера все информационные агентства страны передали сообщение, которое заставило забиться в ужасе сердца всех матерей страны. В мусорном контейнере города Сатпаев было обнаружено тело новорожденной девочки.
AliyaSadyrbaeva
19 июля 2017 / 11:06
  • 2353
  • 19
Почему путь к любимому Иссык-Кулю из года в год не становится легче

Почему путь к любимому Иссык-Кулю из года в год не становится легче

Минувшие выходные для казахстанских туристов, рвущихся от алматинской жары к иссык-кульской прохладе, снова обернулись настоящим кошмаром.
caravan_kz
19 июля 2017 / 18:39
  • 1835
  • 4
Наша новая рубрика «Топ-5»: самые красивые актрисы Казахстана

Наша новая рубрика «Топ-5»: самые красивые актрисы Казахстана

Решили сделать топ-5 красивых актрис Казахстана. Очень долго спорили о первых трех местах и даже чуть не подрались. Было очень тяжело выбирать.
asdbqwe
20 июля 2017 / 14:24
  • 1845
  • 41
Легендарный вокалист «Linkin Park» унёс за собой молодость десятков тысяч людей

Легендарный вокалист «Linkin Park» унёс за собой молодость десятков тысяч людей

Самое грустное, что, как и всегда в таких случаях, скоро на Честера начнут изливаться потоки грязи - что он был наркоманом, или что-то подобное (как в случае со многими знаменитостями).
demonica
21 июля 2017 / 15:13
  • 1854
  • 50