Ajax.ActionLink caricamento del posizionamento dell'immagine con opacità dello sfondo

Question

Quando faccio clic sul collegamento ajax.action, voglio visualizzare l'immagine di caricamento nel mezzo della pagina con l'opacità dello sfondo.

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

Ecco il mio codice

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

posso mostrare un'immagine senza sfondo opacità e non la posizione che voglio. Come posso mostrare l'immagine di caricamento a metà pagina con l'opacità dello sfondo.

Grazie.

Answer 1

per centrare l'immagine:

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

e nel file CSS:

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

Ora, se si vuole fare alcuni effetti più fantasia si potrebbe iscriversi alla OnBegin e OnComplete callback dove si avere più controllo sul modo in cui l'immagine viene mostrata:

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

e quindi:

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

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