Ajax.ActionLink 加载带有背景不透明度的图像定位

【问题标题】：Ajax.ActionLink loading image positioning with background opacityAjax.ActionLink 加载带有背景不透明度的图像定位
【发布时间】：2012-04-04 00:49:44
【问题描述】：

当我点击 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>

我可以显示没有背景不透明度的图像，而不是我想要的位置。如何在具有背景不透明度的页面中间显示加载图像。

谢谢。

【问题讨论】：

标签： asp.net-mvc asp.net-ajax loading

【解决方案1】：

使图像居中：

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

在 CSS 文件中：

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

【讨论】：