HTML+CSS+JavaScript

Здравствуйте всем!

Есть скрипт (работающий на основе библиотеки jquery) который позволяет выводить "крутилку" после нажатия кнопки формы, пока происходит обработка и загрузка информации на сервер.

Все работает отлично выводится GIF анимация "крутилки", но никак не могу сделать отображение текста "Обработка информации, ждите..." под GIF картинкой

Вот сам код:

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var background = $('<div><\/div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '1', 'top' : '0', 'left' : '0', 'opacity' : '0.2'}); var image = $('<img>').attr({'src': '../podaty_obyavlenie/image/zagruzka.gif', 'alt': 'Подождите ...', 'title': 'Подождите, происходит обработка вашей информации'}).css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#000099'});  var loading = $('<div><\/div>').css({'z-index' : '100', 'position' : 'fixed', 'top' : '40%', 'left' : '50%', 'margin' : '-64px 0 0 -64px'}) .html(image); $('#submit').click(function(){ $('body').prepend(loading); $('body').prepend(background); }); }); //]]> </script>

http://jsbin.com/gaqih/1/edit?html,js,output

Спасибо за пример, но это не совсем то, что нужно, специфика работы кода немного не подходит.rnНужно как то добавить текст под картинкой в указанном мной код. rnУ меня всегда были проблемы с JS кодами, не понимаю я его, хоть ты тресни.

Пробовал так, но текст появляется вместо картинки:

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var background = $('<div><\/div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '1', 'top' : '0', 'left' : '0', 'opacity' : '0.2'}); var image = $('<img>').attr({'src': '../podaty_obyavlenie/image/zagruzka.gif', 'alt': 'Подождите ...', 'title': 'Подождите, происходит обработка вашей информации'}).css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#000099'});  var text = $('<br><span>').text('Обработка информации, ждите..').css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#000099'});  var loading = $('<div><\/div>').css({'z-index' : '100', 'position' : 'fixed', 'top' : '40%', 'left' : '50%', 'margin' : '-64px 0 0 -64px'}) .html(image).html(text); $('#submit').click(function(){ $('body').prepend(loading); $('body').prepend(background); }); }); //]]> </script>

Пробовал так, но текст появляется не по центру относительно картинки:

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var background = $('<div><\/div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '1', 'top' : '0', 'left' : '0', 'opacity' : '0.2'}); var image = $('<img><br><div>').attr({'src': '../podaty_obyavlenie/image/zagruzka.gif', 'alt': 'Подождите ...', 'title': 'Подождите, происходит обработка вашей информации'}).text('Обработка информации, ждите..').css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#000099'});  var loading = $('<div><\/div>').css({'z-index' : '100', 'position' : 'fixed', 'top' : '40%', 'left' : '50%', 'margin' : '-64px 0 0 -64px'}) .html(image); $('#submit').click(function(){ $('body').prepend(loading); $('body').prepend(background); }); }); //]]> </script>

Как это исправить, подскажите пожалуйста.

Во-первых, в jQuery ajax имеет два события возникающих при асинхронной отправке данных: ajaxStart - возникает при старте запроса; ajaxStop - возникает по окончании запроса (получения ответа сервера). На эти события и нужно устанавливать обработчики отображения/скрытия крутилки или еще чего либо:

$('body').on({     ajaxStart: function() {        //обработка события или имя функции обработчика     },     ajaxStop: function() {          //обработка события или имя функции обработчика     }    }); //а не $('#submit').click(function()....

Что касается вывода сообщения, то это как понимать еще, что к примеру мешает показывать крутилку в которой помимо самой анимации выводится и сообщение. При этом как его выводить, это как хотите, можно и с помощью псевдоселектора :after, а вот атрибуты alt и title изображения анимации каким боком могут служить для этого, если первый служит для случая когда изображение не загружено, а второй срабатывает при наведении на изображение мыши, и эти поведения никоим образом JS не касаются.

Спасибо, я вас понял.
Но все таки, как выравнять текст по центру картинки, всяко пробовал, не работает:

$(document).ready(function(){ var background = $('<div><\/div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '1', 'top' : '0', 'left' : '0', 'opacity' : '0.2'}); var image = $('<img><br><br><span>').attr({'src': '../podaty_obyavlenie/image/zagruzka.gif'}).text('Обработка информации, ждите..').css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#000099', 'text-align': 'center'});  var loading = $('<div><\/div>').css({'z-index' : '100', 'position' : 'fixed', 'top' : '40%', 'left' : '50%', 'margin' : '-64px 0 0 -64px'}) .html(image);

Ничего вы не поняли, если опять пишите бедлам какой-то. Лоадер, это один слой, в котором есть фоновое изображение вашей крутилки, которое позиционируется как надо, имеет указанную прозрачность и внутренние отступы соответствующие. А текст, это псевдоселктор этого лоадера:

#loader:after {     content: "Пожалуйста подождите, чего-то там делается..."; }

Все.

Ваша теория мне понятна, но куда вставить ваш код - не понимаю

$('body').on({      ajaxStart: function() {          $('#loader').show();     },      ajaxStop: function() {           $('#loader').hide();      }     });