更好地显示特定操作的加载gif的方法

时间:2012-06-16 10:44:04

标签: jquery popup gif

我正在使用ASP.NET/C#。在我的某个页面中,我在ASP.NET Listview显示了客户列表及其详细信息。在每一行中,我都有一个Linkbutton来显示该客户的信息在popup中。当前点击ShowDetails链接时,我显示loading gif,然后显示信息popup。我正在使用jquery delay()延迟信息显示popup

显示弹出窗口的Jquery函数:

function ShowCustomerInformationPopUp()
 {
    $('#AuthorizeCustomerLoadImg').show();
    $('#AuthorizeCustomerMask').delay(1200).show("slow");
    $('#AuthorizeCustomerShowCustInfo').delay(1200).show("slow");
 }

我使用Linkbuttoncode behind点击ClientScriptManager.RegisterStartupScript点击事件调用此功能。现在,当用户点击Show Details Linkbutton {{1}时1}}被延迟一点同时显示popup。所以我的问题是,通过延迟显示其他元素来显示loading gif是一种好方法。这种方法有任何缺点。如何很多人都会展示loading gif

欢迎任何建议。

1 个答案:

答案 0 :(得分:1)

我会谨慎使用加载gif。这意味着当我期待从执行过程中回调时,我只会使用它。即。例如AJAX请求。

由于你正在打开一个新窗口,当新的浏览器窗口已经有loading指示符时,我不明白为什么你会在开启窗口上想要加载gif。

如果您确实想要在弹出页面加载后准确地使gif消失,那么您的代码必须放在弹出窗口中,以开启窗口为目标。

编辑:

既然你声称它不是一个新窗口,那么一个很酷的方法是使用fadeIn(),你也可以在show()使用它,但我不这样做我认为如果你这样做,gif甚至会有足够的时间来展示。

无论如何,你会在回叫中删除你的加载gif,如下所示:

function ShowCustomerInformationPopUp()
 {
    $('#AuthorizeCustomerLoadImg').show();
    $('#AuthorizeCustomerMask').show(1200);

    $('#AuthorizeCustomerShowCustInfo').show(1200, function(){
        // this is the callback function when competed, remove the gif here
        $('#AuthorizeCustomerLoadImg').hide();
    });

 }

不确定哪个div是嫌疑人,因此您可以在.show()个任意一个语句中应用上述回调功能。