$.ajax({
url: link,
type: 'get',
dataType: '_default',
data: '',
beforeSend: function (){
// подгрузка картинки ожидания
},
success: function(data,textStatus){
$('#load_step').html(data);
},
complete: function(){
// удаление картинки ожидания
load_data_step(id);
}
});
Эффект загрузки в jQuery
Есть такой код на js он подгружает какую либо информацию. Мне нужно создать эффект ожидания страницы. Как это сделать в конкретном блоке.
[HTML]
<table>
<tr>
<td>
<div id="load_step"></div>
// тут же нужно выводить картинку ожидания по центру контейнера он всегда может быть разных размеров.
</td>
</tr>
</table>
[/HTML]
Искал в интернете никак не могу или неправильно формулирую этот вопрос. Помогите реализовать.
Код:
[HTML]
<table>
<tr>
<td>
<div id="load_step"></div>
// тут же нужно выводить картинку ожидания по центру контейнера он всегда может быть разных размеров.
</td>
</tr>
</table>
[/HTML]
Искал в интернете никак не могу или неправильно формулирую этот вопрос. Помогите реализовать.
Что мешает приаттачить к "#load_step" img? Т.е. картинку?
Аттач делать в "beforeSend", а в "success" удалить картинку? Тем более у вас все в комментах написано.
Делается все стандартным
Аттач делать в "beforeSend", а в "success" удалить картинку? Тем более у вас все в комментах написано.
Делается все стандартным
Код:
$(document.createElement("img")).attr("src","load.gif").insertAfter("#load_step");
Мне нужно создать эффект загрузки ajax когда поверх контента выпрыгивает картинка и пока не подгрузится новый контент в контейнер она бы отображалась посередине этого контейнера.
Читать умеете? Я Вам что написал? Как раз то, что вы спрашиваете.
Или Вам надо затемнить задний фон? Или вообще чтобы вам готовый код дали? А лучше приведите пример того, чего хотите.
Чтобы был по центру - создавайте правила CSS.
Или Вам надо затемнить задний фон? Или вообще чтобы вам готовый код дали? А лучше приведите пример того, чего хотите.
Чтобы был по центру - создавайте правила CSS.
Цитата: UAS
Читать умеете? Я Вам что написал? Как раз то, что вы спрашиваете.
Или Вам надо затемнить задний фон? Или вообще чтобы вам готовый код дали? А лучше приведите пример того, чего хотите.
Чтобы был по центру - создавайте правила CSS.
Или Вам надо затемнить задний фон? Или вообще чтобы вам готовый код дали? А лучше приведите пример того, чего хотите.
Чтобы был по центру - создавайте правила CSS.
Спасибо читать я умею. Я же конкретизировал что мне необходимо поместить объект поверх контейнера а не в нем. Необходимо выполнение в таком порядке как я написал а не удалять объект в success. А какие правила css необходимо создать чтоб разместить объект внутри контейнера по центру? Мне не нужен готовый код мне нужно просто объяснить. Как засунуть картинку в контейнер поверх текста чтоб она отображалась в центре этого контейнера. Прикрепил пример посмотрите.
Автор, сделай скрытый элемент. Показывать его, когда идет загрузка, и скрывать когда она закончилась. Зачем обязательно что-то вставлять?
Цитата: Nixus
Автор, сделай скрытый элемент. Показывать его, когда идет загрузка, и скрывать когда она закончилась. Зачем обязательно что-то вставлять?
Можно и так. А как этот элемент выровнять по центру этого блока и поверх текста?
Цитата: -=Orlangur=-
Можно и так. А как этот элемент выровнять по центру этого блока и поверх текста?
А это вопрос к верстальщику.
Вообще, плохо помню css, в частности что надо указывать в position. Т.е. в этом же вашем контейнере делаете скрытый div с position: relative (или типа того, поэкспериментируйте).
Далее в beforeSend узнавайте height и width контейнера, благо в jQuery есть специальные функции, вроде как $("#load_step").height(). Затем отображаете скрытый блок $("div#hidden").show(); Затем просто задаете позиции top и left для данного div, при этом учитывается то, что вы знаете размеры показываемой картинки. Ну а высчитать центр блока, имея его длину/ширину - это уже дело элементарное.
P.S.: не забываем про z-index
Далее в beforeSend узнавайте height и width контейнера, благо в jQuery есть специальные функции, вроде как $("#load_step").height(). Затем отображаете скрытый блок $("div#hidden").show(); Затем просто задаете позиции top и left для данного div, при этом учитывается то, что вы знаете размеры показываемой картинки. Ну а высчитать центр блока, имея его длину/ширину - это уже дело элементарное.
P.S.: не забываем про z-index