Agregar una animación de carga a jquery ajax .load ()

Actualmente tengo este código y es bastante simple.

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

Pero muestra el contenido solo después de una carga completa y durante ese tiempo 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 jquery no explica nada al respecto. (hasta donde se)

Crea un div de loading primero.

  
Please wait...

Oculte este DIV inicialmente y adjunte el código para mostrar este div cuando se inicie ajaxCall y oculte esto cuando finalice la llamada ajax.

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

Editar
Hubo algún problema en las tags de formato SO hace un tiempo. Agregó esos de nuevo.

Para ello tienes que usar una imagen gif. En primer lugar, cambie el html de #window a gif image hasta que se cargue el contenido

Código de trabajo

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

Para solicitudes asíncronas que sé que tienen el potencial de tomar más de unos pocos milisegundos, uso Spin.js. No tiene ninguna dependencia externa y es compatible con todos los navegadores.

 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 fiddle http://jsfiddle.net/y75Tp/73/ (actualización gracias a verbumSapienti)

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

2) Poner el código de estilo en un archivo css

3) Ponga el código div en su archivo html, como:

 
Please wait...
where the #spinnerDiv is the actual div from cssload.

4) En un archivo js, ​​agregue las siguientes líneas jquery:

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

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

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

 #loadingDiv{ display:none; } 

El método load () de jQuery tiene una callback en la que puede obtener el estado xhr. Usando el cargador spin.js (o cualquier otro indicador de carga), puede mostrar y luego ocultar cuando se completa .load (). Nota: este ejemplo proporcionará un valor 404 ya que el archivo cargado no existe, pero el indicador de carga giratoria 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(); });