• 15115
  • 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
1669

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

Комментарии

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

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

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

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

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Известный казахстанский бизнесмен становится первопроходцем и создает школу, о которой можно только мечтать. То, что мы, как взрослые, делаем в бизнесе, дети будут делать в этой школе.
Zhumanova
24 апр. 2017 / 16:29
  • 17538
  • 3
Как выбрать новостройку в Алматы: инсайты, критерии и личный опыт

Как выбрать новостройку в Алматы: инсайты, критерии и личный опыт

Я прекрасно понимаю тех, кто долго ищет подходящую квартиру - сама искала, потратила на поиск 1,5 года. Что, прежде всего, повлияло на мой выбор при покупке квартиры в новостройке Алматы?
Zhumanova
21 апр. 2017 / 10:04
  • 3626
  • 12
«Третья мировая война начнётся в мае 2017 года» – провидец из Португалии

«Третья мировая война начнётся в мае 2017 года» – провидец из Португалии

Провидец из Португалии по имени Горацио Вильегас считает, что новая мировая война состоится уже в текущем году. Считается, что португалец два года назад объявил, что Трамп станет президентом.
Seattle
21 апр. 2017 / 15:33
  • 3387
  • 12
«А ты покушала?» или Как завоевать сердце женщины простой заботой

«А ты покушала?» или Как завоевать сердце женщины простой заботой

Так как опыт хождения по свиданиям у меня немаленький, да и с интуицией давно дружу, я быстро отсеиваю тех, с кем будут проблемы. Как я это определяю? Очень просто.
Bonittta
22 апр. 2017 / 14:10
Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Всё ли так хорошо у жителей Казахстана? Почему-то наша страна сохраняет твёрдые позиции в первых строчках мировых рейтингов по числу самоубийств.
openqazaqstan
24 апр. 2017 / 16:54
  • 2999
  • 16
Депутат сената Айтимова: «Не нужно критиковать депутатов, так как вы сами их избирали»

Депутат сената Айтимова: «Не нужно критиковать депутатов, так как вы сами их избирали»

Наши депутаты известны не достижениями и работой, а своими высказываниями. Сегодня в СМИ вышла новость, где депутат сената Бырганым Айтимова ответила на критику народа.
tala03
20 апр. 2017 / 13:44
  • 2529
  • 20
Стихия всё спишет. Почему дамба за 200 миллионов никого не спасла?

Стихия всё спишет. Почему дамба за 200 миллионов никого не спасла?

Наводнение в Атбасаре, размытые дороги, подтопленные сёла по всему Центральному и Северному Казахстану... Что происходит?
openqazaqstan
19 апр. 2017 / 15:20
  • 2510
  • 14
Каждую ночь я жду его. Почти каждую ночь он оправдывает мои ожидания

Каждую ночь я жду его. Почти каждую ночь он оправдывает мои ожидания

Каждую ночь я жду его. Такая уж у него работа, он приходит поздно. Но почти каждую ночь он оправдывает мои ожидания. Когда его долго нет, признаюсь, я начинаю нервничать. Названивать и писать смс-ки...
DominaOmnium
21 апр. 2017 / 2:25
  • 2301
  • 11
Атбасарская дамба: кто так красиво сэкономил 137 миллионов?

Атбасарская дамба: кто так красиво сэкономил 137 миллионов?

История с разрушенной атбасарской плотиной получила интригующее продолжение. На официальном уровне говорят о 200 млн тенге, в то время как районный аким сообщил, что дамбу строили совсем за другие деньги.
openqazaqstan
20 апр. 2017 / 15:10
  • 2122
  • 14