Javascript-форум - Вывод "крутилки" при загрузке данных на сервер

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вывод "крутилки" при загрузке данных на сервер (https://javascript.ru/forum/misc/46020-vyvod-krutilki-pri-zagruzke-dannykh-na-server.html)

Вывод "крутилки" при загрузке данных на сервер

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

Есть скрипт (работающий на основе библиотеки 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': 'Обработка информации, ждите...'}).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>

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

<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><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);

$('#submit').click(function(){
$('body').prepend(loading);
$('body').prepend(background);
});
});
//]]>
</script>

$(document).ready(function () {
    var background = $('<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'
    });

    var text = $('<span>').text('Обработка информации, ждите..').css({
      'font-family': 'Verdana, Arial, Helvetica, sans-serif',
      'font-weight': 'bold',
      'font-size': '16px',
      'color': '#000099'
    });
  
    var loading = $('<div>').css({
      'z-index': '100',
      'position': 'fixed',
      'top': '40%',
      'left': '50%',
      'margin': '-64px 0 0 -64px',
      'text-align': 'center'
    }).html(image).append('<br><br>').append(text);
    

    $('#submit').click(function () {
      $('body').prepend(loading).prepend(background);
    });
  });

Огромное спасибо вам за помощь!
Все работает как надо!

Один вопрос: закрывающий тег DIV точно не нужен?

Цитата:

Сообщение от sega_z (Сообщение 304413)

Один вопрос: закрывающий тег DIV точно не нужен?

В данном случае особой разницы нет, jQuery поддерживает оба варианта создания элемента. Плюс еще есть такой вариант: $(document.createElement('div')) и он будет наиболее быстрым.

Все понятно, СПАСИБО ОГРОМНОЕ!!!