---
title: "Простая пост загрузка изображений с jQuery"
description: "Вернувшись из небольшого отпуска по болезни (не стоит выходить на улицу с мокрой головой) продолжу с..."
author: "Skyress"
published: "2011-05-07T12:06:37+00:00"
modified: "2011-05-07T12:06:37+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/prostaya-post-zagruzka-izobrazheniy-s-jquery-153402"
markdown_url: "https://yvision.kz/post/prostaya-post-zagruzka-izobrazheniy-s-jquery-153402/markdown"
site_name: "Yvision.kz"
---

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

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

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

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

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

Конечно же возникло несколько вариантов развития событий:
- Динамическая (ajax) загрузка каждого последующего изображения слайдера

- Загрузка страницы c несколькими первыми изображениями + пост загрузка статики.

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

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

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

> ``` $.ajax({ type: "POST", url: , 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):**

>  $j ? 'img' : 'src'; $output .= ""; $i++; } $output .= "
"; // ... ?> Получам следующий html:

 У последних изображений вместо атрибута **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 в качестве фронтенда, можно значительно ускорить получение статики.*

---

Source: [https://yvision.kz/post/prostaya-post-zagruzka-izobrazheniy-s-jquery-153402](https://yvision.kz/post/prostaya-post-zagruzka-izobrazheniy-s-jquery-153402)