Как показать ajax загрузку gif анимации во время загрузки страницы?

Question

Я пытаюсь реализовать AJAX на своем веб-сайте. Когда кликается содержимое изменения div, он должен загрузить changepass.template.php. Для этого используется код im.

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

Мой вопрос в том, как показать GIF Animation (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; 
    }); 
}); 

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

<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.

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

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