Añadir una animación de carga a jquery ajax .load()

Question

Actualmente tengo este código y es bastante simple

$('#window').load('http://mysite.com/mypage.php'); 

pero muestra el contenido sólo después de plena carga y durante la duración que el elemento #windows permanece vacío. Quiero mostrar una imagen de carga hasta que se cargue la página. ¿Cómo debería hacerlo? El sitio de jquery no explica nada al respecto. (afaik)

Answer 1

Crear una loading div primera.

<div id='loadingDiv'> 
    Please wait... <img src='path to your super fancy spinner' /> 
</div> 

---

Ocultar esta div inicialmente y adjuntar el código para mostrar este div cuando ajaxCall se inicia y se esconden cuando esta llamada AJAX completa.

$('#loadingDiv').hide().ajaxStart(function() { 
$(this).show(); // show Loading Div 
}).ajaxStop (function(){ 
$(this).hide(); // hide loading div 
}); 

Editar
Hubo algún problema en las etiquetas de formato por lo que un tiempo atrás. Se agregaron nuevamente.

Answer 2

Para ello, debe utilizar una imagen gif. En primer lugar cambiar el código HTML de #window imagen gif a hasta que el contenido se carga

Código de Trabajo

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php'); 

Answer 3

Para solicitudes asíncronas que yo conozco tienen el potencial de llevar más de unos pocos milisegundos, yo uso Spin.js No tiene ningún dependencias externas, y es multi-navegador compatible

var opts = { 
    lines: 13, // The number of lines to draw 
    length: 10, // The length of each line 
    width: 4, // The line thickness 
    radius: 11, // The radius of the inner circle 
    rotate: 0, // The rotation offset 
    color: '#000', // #rgb or #rrggbb 
    speed: 0.6, // Rounds per second 
    trail: 32, // Afterglow percentage 
    shadow: false, // Whether to render a shadow 
    hwaccel: false, // Whether to use hardware acceleration 
    className: 'spinner', // The CSS class to assign to the spinner 
    zIndex: 2e9, // The z-index (defaults to 2000000000) 
    top: 'auto', // Top position relative to parent in px 
    left: 'auto' // Left position relative to parent in px 
}; 

var target, spinner; 

$(function(){ 
    target = $('#window').get(0); 
    spinner = new Spinner(opts); 
    spinner.spin(target); 
    setTimeout(function(){ 
     spinner.stop(); 
     $(target).html("Loading finished."); 
    }, 3500); 
}); 

ver violín http://jsfiddle.net/y75Tp/73/ (actualización gracias a verbumSapienti)

Answer 4

1) Vaya a cssload.net y configure un girador con forma, colores, velocidad y tamaño. Descargue el código.

2) poner el código estilo en un archivo css

3) Poner el código div en el archivo HTML, como por ejemplo:

<div id="loadingDiv"> 
     Please wait... 
     <div id="spinnerDiv"> 
      <div id="blockG_1" class="facebook_blockG"> 
      </div> 
      <div id="blockG_2" class="facebook_blockG"> 
      </div> 
      <div id="blockG_3" class="facebook_blockG"> 
      </div> 
     </div> 
    </div> 

where the #spinnerDiv is the actual div from cssload. 

4) En un archivo js, añadir las siguientes líneas de jQuery:

//******************************* 
    // Loading div animation 
    $(document).ajaxStart(function(){ 
      $("#loadingDiv").css("display","block"); 
     }); 
     $(document).ajaxComplete(function(){ 
      $("#loadingDiv").css("display","none"); 
     }); 

la ajaxStart se llama cada vez que una llamada se inicia ajax; se llama ajaxComplete cuando se completa la misma llamada.

5) Si no desea ver la ruleta cuando se carga por primera vez a la página, asegúrese de agregar lo siguiente en su archivo css:

#loadingDiv{ 
display:none; 
} 

Answer 5

La carga jQuery() método tiene una devolución de llamada cuando puedes obtener el estado xhr. Usando el cargador de spin.js (o cualquier otro indicador de carga), puede mostrar, y luego ocultar cuando se completa .load(). Nota: este ejemplo dará un 404 ya que el archivo cargado no existe, pero el indicador de carga del rotor funciona de la misma manera.

// create gloabal page spinner for loading stuff 
 
var opts = { 
 
    lines: 13, // The number of lines to draw, 
 
    length: 12, // The length of each line 
 
    width: 4, // The line thickness 
 
    radius: 15, // The radius of the inner circle 
 
    scale: .5, // Scales overall size of the spinner 
 
    corners: 1, // Corner roundness (0..1) 
 
    color: '#000', // #rgb or #rrggbb or array of colors 
 
    opacity: 0.25, // Opacity of the lines 
 
    rotate: 0, // The rotation offset 
 
    direction: 1, // 1: clockwise, -1: counterclockwise 
 
    speed: 1, // Rounds per second 
 
    trail: 60, // Afterglow percentage 
 
    fps: 20, // Frames per second when using setTimeout() as a fallback for CSS 
 
    zIndex: 2e9, // The z-index (defaults to 2000000000) 
 
    className: 'spinner', // The CSS class to assign to the spinner 
 
    top: '50%', // Top position relative to parent 
 
    left: '50%', // Left position relative to parent 
 
    shadow: false, // Whether to render a shadow 
 
    hwaccel: false, // Whether to use hardware acceleration 
 
    position: 'absolute', // Element positioning 
 
} 
 
var spinner = new Spinner(opts).spin(); 
 
var target = $("#loader").append(spinner.el); 
 

 
$("#result").load("ajax/test.html", function(response, status, xhr) { 
 
    if (status == "error") { 
 
    var msg = "Sorry but there was an error: "; 
 
    $("#result").html(msg + xhr.status + " " + xhr.statusText); 
 
    } 
 
    // remove loader 
 
    $("#loader").empty(); 
 
});

<script src="http://fgnass.github.io/spin.js/spin.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loader"> 
 
</div> 
 
<div id="result"> 
 
</div>