एक लोड हो रहा है एनीमेशन जोड़ें jQuery ajax .load()

Question

मैं वर्तमान में इस कोड है और यह बहुत सरल

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

है लेकिन यह केवल पूरी तरह से लोड के बाद और उस अवधि #windows तत्व खाली रहेंगी दौरान सामग्री दिखाता है। मैं पृष्ठ लोड होने तक लोडिंग छवि दिखाना चाहता हूं। मैं इसे कैसे करूं? jquery साइट इसके बारे में कुछ भी नहीं बताती है। (afaik)

Answer 1

पहले एक loading div बनाएं सभी की पहले gif छवि के लिए #window के HTML बदल जाते हैं।

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

---

छिपाएं यह शुरू में div और इस div जब ajaxCall शुरू होता है और इस छिपाने जब ajax कॉल पूरा करता है दिखाने के लिए कोड देते हैं।

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

संपादित
एक समय पहले अतः स्वरूपण टैग में कुछ समस्या हुई थी। फिर से जोड़ा गया।

Answer 2

इस उद्देश्य के लिए आपको एक gif छवि का उपयोग करना होगा। सामग्री भरी हुई है जब तक

कार्य संहिता

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

Answer 3

async अनुरोध मुझे पता है कि संभावित कुछ मिलीसेकेंड से ज्यादा लेना है, मैं का उपयोग Spin.js यह किसी भी बाहरी निर्भरता नहीं है, और पार ब्राउज़र संगत

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

देख बेला http://jsfiddle.net/y75Tp/73/ (अद्यतन है verbumSapienti के लिए धन्यवाद)

Answer 4

1) cssload.net पर जाएं और आकार, रंग, गति और आकार के साथ एक स्पिनर को कॉन्फ़िगर करें। कोड डाउनलोड करें।

2) इस तरह के रूप में, एक सीएसएस फ़ाइल

3) अपनी HTML फ़ाइल में div कोड रखो में शैली कोड डालें:

<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) एक js फ़ाइल में, निम्नलिखित jquery लाइनें जोड़ें:

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

AJAXStart को जब भी AJAX कॉल शुरू होता है तब कहा जाता है; AJAXComplete को कॉल किया जाता है जब एक ही कॉल पूरा हो जाता है।

5) आप स्पिनर जब पेज पहले भरी हुई है को देखने के लिए नहीं करना चाहते हैं, अपने सीएसएस फ़ाइल में निम्न जोड़ना सुनिश्चित करें:

#loadingDiv{ 
display:none; 
} 

Answer 5

jQuery लोड() विधि एक कॉलबैक जहां है आप एक्सएचआर स्थिति प्राप्त कर सकते हैं। Spin.js लोडर (या कोई अन्य लोड सूचक) का उपयोग करके, आप दिखा सकते हैं, फिर .load() पूर्ण होने पर छुपाएं। नोट: यह उदाहरण 404 देगा क्योंकि लोड की गई फ़ाइल मौजूद नहीं है, लेकिन स्पिनर लोड सूचक एक ही काम करता है।

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