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

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

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

мой вопрос в том, как показать GIF-анимацию (загрузка.хиф) хотя changepass страницы.шаблон.php полностью загружен. Дайте мне несколько подсказок кода, пожалуйста.

6
ajax css jquery loading php

4 ответов

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

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

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

22

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

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

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

9

а что стиль

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

просто использовать .hide() а .show() методы.

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

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

2

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

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