Aggiungere un'animazione di caricamento per jquery ajax .load()

Question

Al momento ho questo codice e 'piuttosto semplice

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

Ma mostra il contenuto solo dopo che a pieno carico e durante questo periodo l'elemento #windows rimane vuoto. Voglio mostrare un'immagine di caricamento finché la pagina non viene caricata. Come dovrei farlo? Il sito jquery non ne spiega nulla. (afaik)

Answer 1

Crea un loading div prima.

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

---

Nascondi questo div inizialmente e allegare il codice per mostrare questo div quando ajaxCall inizia e nascondere questo quando chiamata AJAX completa.

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

Modifica
C'è stato qualche problema nei tag di formattazione SO un po 'indietro. Aggiunti di nuovo quelli.

Answer 2

Per questo scopo è necessario utilizzare un'immagine gif. Prima di tutto modificare l'html di #window immagine GIF fino a quando il contenuto viene caricato

codice di lavoro

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

Answer 3

Per richieste asincrone che io conosco hanno il potenziale per prendere più di pochi millisecondi, io uso Spin.js Essa non ha dipendenze esterne, ed è cross-browser compatibile

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

vedere violino http://jsfiddle.net/y75Tp/73/ (aggiornamento grazie a verbumSapienti)

Answer 4

1) Vai a cssload.net e configura uno spinner con forma, colori, velocità e dimensioni. Scarica il codice.

2) mettere il codice stile in un file css

3) Inserire il codice div nel file HTML, come ad esempio:

<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) In un file js, aggiungi le seguenti linee jquery:

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

l'ajaxStart è chiamata ogni volta che un ajax chiamata comincia; l'ajaxComplete viene chiamato al termine della stessa chiamata.

5) Se non si desidera visualizzare la trottola quando la pagina viene caricato, assicurati di aggiungere la seguente nel file css:

#loadingDiv{ 
display:none; 
} 

Answer 5

Il carico jQuery() metodo ha una funzione di callback in cui puoi ottenere lo stato xhr. Usando il loader spin.js (o qualsiasi altro indicatore di carico), puoi mostrare, quindi nascondere quando il .load() è completo. Nota: questo esempio fornirà un 404 poiché il file caricato non esiste, ma l'indicatore di caricamento dello spinner funziona lo stesso.

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