¿Cómo se muestra ajax cargando animación GIF mientras se carga la página?

Question

Intento implementar AJAX en mi sitio web. Cuando se hace clic en el contenido del paso de cambio div, debe cargar changepass.template.php. Aquí está el código que estoy usando para eso.

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

Mi pregunta es cómo mostrar la animación GIF (loading.gif) mientras que el changepass.template.php página esté completamente cargada. Dame algunos consejos sobre el código. Por favor.

Answer 1

Hay muchos enfoques para hacer esto. Una manera simple de hacer:

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

Editado display: block a show() después de la sugerencia de James Wiseman :)

Answer 2

En lugar de que estableciendo el estilo

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

Simplemente use el .hide() y. show() métodos.

Cuenta para las definiciones predeterminadas de la hoja de estilos del navegador para los elementos HTM1. Es posible que no desee mostrar 'bloque' para la imagen. No puede haber un montón de diferentes estilos de visualización posibles para un elemento:

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

Answer 3

puede llamar a un método para mostrar gif carga después de llamar a la carga y ocultarlo mediante devolución de llamada en función de la carga:

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

Answer 4

para que sea un poco más robusto, por ejemplo, que se olvide de añadir el

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

a la html, también se puede hacer esto en jQuery, algo como:

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

Que agregará el div automáticamente.

Simplemente active esto en el evento de botón onclick.

Hace que sea un poco menos abierto a errores.