अजाक्स। पृष्ठभूमि अस्पष्टता

Question

के साथ एक्शनलिंक लोडिंग छवि पोजिशनिंग जब मैं AJAX.action लिंक पर क्लिक करता हूं, तो मैं पृष्ठ के मध्य में बैकग्राउंग अस्पष्टता के साथ लोडिंग छवि प्रदर्शित करना चाहता हूं।

<img id="image_loading" alt="" src="../../images/site/loading.gif" style="position: fixed;  
    display: none;" /> 

यहाँ मेरी कोड

<nav class="ust_menu"> 
    <ul> 
     <li>@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li> 
     <li>@Ajax.ActionLink("Contact Us", "Contact", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li> 
     <li>@Ajax.ActionLink("About", "About", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>  
    </ul> 
</nav> 

मैं पृष्ठभूमि अस्पष्टता और नहीं के बिना स्थिति मैं चाहता हूँ छवि दिखा सकते हैं। मैं पृष्ठभूमि अस्पष्टता के साथ पृष्ठ के मध्य में लोडिंग छवि कैसे दिखा सकता हूं।

धन्यवाद।

<img id="image_loading" alt="" src="@Url.Content("~/content/loading.gif")" class="progress" /> 

और सीएसएस फ़ाइल में:

Answer 1

छवि को केंद्रित करने के

.progress { 
    display: none; 
    position: fixed; 
    top: 50%; 
    left : 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

अब अगर आप कुछ और फैंसी प्रभाव जहां आप करेंगे आप OnBegin और OnComplete कॉलबैक की सदस्यता सकता है क्या करना चाहते हैं छवि दिखाए जाने के तरीके पर अधिक नियंत्रण रखें:

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
    OnBegin = "onBegin", 
    OnComplete = "onComplete", 
    UpdateTargetId = "article_site" 
}) 

और उसके बाद:

function onBegin() { 
    // TODO: show the progress image 
} 

function onComplete() { 
    // TODO: hide the progress image 
}