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

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

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

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

Ответы на вопрос(4)

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

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

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

<img src="loading.gif">

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

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

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

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

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

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

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

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

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

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

Решение Вопроса

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

<img src="loading.gif">

JS:

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

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

 kayteen20 авг. 2009 г., 12:51
Да ты'прав .. яЯ изменю это и сделаю это как show () / hide ()
 James Wiseman20 авг. 2009 г., 12:48
Установка стиля отображения с использованием css таким способом игнорирует настройки таблицы стилей браузера по умолчанию. Вы можете не захотеть отображатьблок»

Ваш ответ на вопрос