Как показать анимацию загрузки AJAX при загрузке страницы?

Question

Я пытаюсь внедрить AJAX на моем сайте. Если щелкнуть содержимое div-перехода, он должен загрузить файл changepass.template.php. Вот код, который я использую для этого.

 $(function() {
   $(".changepass").click(function() {
    $(".block1").load("views/changepass.template.php");
    return false;
 });

У меня вопрос, как показать GIF-анимацию (loading.gif), пока страница changepass.template.php полностью загружена. Дайте мне несколько советов по коду, пожалуйста.

Answer 1

Есть много подходов для этого. Простой способ сделать:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

JS:

$(function() {
    $(".changepass").click(function() {
        $("#dvloader").show();
        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
        return false;
    });
});

Отредактировано Отображение: блок до show () после предложения Джеймса Уайзмана:)

Answer 2

Чтобы сделать его немного более устойчивым, например, вы забыли добавить

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

в HTML, вы также можете сделать это в jQuery, что-то вроде:

var container = $.create('div', {'id':'dvloader'});
var image = $.create('img', {'src':'loading.gif'});
container.append($(image));
$("body").append($(container));

Который добавит div автоматически.

Просто запустите это при событии нажатия кнопки.

Делает его немного менее открытым для ошибок.

Answer 3

Скорее, что установка стиля

.css("display", "block");

Просто используйте методы .hide() и. show().

Они учитывают определения таблиц стилей браузера по умолчанию для элементов HTMl. Возможно, вы не захотите отображать «блок» для изображения. Для элемента может быть множество различных стилей отображения:

http://www.w3schools.com/htmldom/prop_style_display.asp

Answer 4

Вы можете вызвать некоторый метод, чтобы показать загрузочный gif после вызова load и скрыть его с помощью обратного вызова в функции load:

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});