पृष्ठ लोड होने पर AJAX लोडिंग gif एनीमेशन कैसे दिखाएं?

Question

मैं अपनी वेबसाइट में AJAX को लागू करने का प्रयास करता हूं। जब div changepass की सामग्री क्लिक की जाती है तो उसे changepass.template.php लोड करना चाहिए। इसके लिए कोड का उपयोग कर रहा है।

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

मेरा प्रश्न GIF एनिमेशन (loading.gif) को दिखाने के लिए कैसे, जबकि पेज changepass.template.php पूरी तरह से भरी हुई है है। कृपया मुझे कुछ कोड सुझाव दें।

Answer 1

ऐसा करने के लिए कई दृष्टिकोण हैं। एक आसान तरीका करने के लिए:

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

जे एस:

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

संपादित प्रदर्शन: ब्लॉक शो()को जेम्स ऋषि :)

Answer 2

बल्कि से सुझाव के बाद कि शैली को सेट करना

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

बस .hide() और का उपयोग करें। show() विधियां।

एचटीएमएल तत्वों के लिए ब्रॉवर डिफ़ॉल्ट स्टाइलशीट परिभाषाओं के लिए ये खाता। आप छवि के लिए 'ब्लॉक' प्रदर्शित नहीं करना चाहेंगे। वहाँ एक तत्व के लिए अलग-अलग संभावित प्रदर्शन शैलियों का भार हो सकता है:

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

Answer 3

आप लोड बुला के बाद लोड हो रहा है gif दिखाने के लिए और लोड समारोह में कॉलबैक का उपयोग कर इसे छिपाने के लिए कुछ विधि कॉल कर सकते हैं यह एक छोटे और अधिक मजबूत, उदाहरण के लिए, आप html को

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

जोड़ना भूल बनाने के लिए, आप भी jQuery में ऐसा कर सकते हैं, कुछ जैसे:

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

जो स्वचालित रूप से div को जोड़ देगा।

बस इसे ऑनक्लिक बटन ईवेंट पर आग लगाएं।

त्रुटियों के लिए थोड़ा कम खुला बनाता है।

Answer 4

:

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