Question

有没有人可以帮助如何在加载数据时显示加载器图像？我做了一个不完美的示例。请给我最好的方法。我有一个问题，我们可以使用jquery或javascript吗？当我点击加载数据必须在此过程之间加载到GV时，预加载器必须像在GMAIL中一样可见。 Like this Process Demo Picture

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loader Image While Loading Data in GV.aspx.cs"
    Inherits="Loader_Image_While_Loading_Data_in_GV" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Loader Image While Loading Data in GV</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Image ID="load_img" runat="server" Height="70px" Width="70px" ImageUrl="~/Images/ajax-loader_green.gif"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnload" runat="server" Text="Load" OnClick="btnload_Click" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="gv1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                        BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
                        <AlternatingRowStyle BackColor="PaleGoldenrod" />
                        <FooterStyle BackColor="Tan" />
                        <HeaderStyle BackColor="Tan" Font-Bold="True" />
                        <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                        <SortedAscendingCellStyle BackColor="#FAFAE7" />
                        <SortedAscendingHeaderStyle BackColor="#DAC09E" />
                        <SortedDescendingCellStyle BackColor="#E1DB9C" />
                        <SortedDescendingHeaderStyle BackColor="#C2A47B" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

在我背后的代码中写了这样的

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AdventureWorksModel;

public partial class Loader_Image_While_Loading_Data_in_GV : System.Web.UI.Page
{
    AdventureWorksEntities awe = new AdventureWorksEntities();
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnload_Click(object sender, EventArgs e)
    {
        load_img.Visible = true;
        gv1.DataSource = awe.CountryRegionCurrencies.ToList();
        gv1.DataBind();
        load_img.Visible = false;
    }
}

Answer 1

Loader映像通常用于通知用户某些 Ajax 活动正在运行。

我建议您将GridView与UpdatePanel一起打包如下：

<form id="form1" runat="server">
<!-- You must always add a ScriptManager control -->
<asp:ScriptManager ID="ScriptManager1" runat="server" />



<td>
    <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="btnLoad" eventname="Click" />
        </Triggers>
        <ContentTemplate>
           <asp:GridView ID="gv1" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</td>

</form>

UpdatePanel的ContentTemplate中的所有内容都会在UpdatePanel的Triggger发生时更新（在这种情况下，当用户点击btnLoad按钮时）

现在，您需要添加UpdateProgress以通知用户服务器端处理仍在进行中。

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <!-- it doesn't have to be asp Image control -->
    <img src="Images/ajax-loader_green.gif" alt="" />
</asp:UpdateProgress>

你可以把它放在任何地方。

使用示例read this blog

Answer 2

使用以下小型jQuery插件。它将加载图像集中在指定容器的中间（垂直和水平）： http://plugins.jquery.com/project/CenterImage

演示网站： http://www.demosites.somee.com/demos/centerimage.html

使用方法：此插件将加载图像集中放置在指定的html容器（div，span ...）上。

目前可用的配置设置：

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

初始化的最低配置：

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

调用此方法，以删除加载图像（和叠加层）

$('.4th').CenterImage('remove');

将数据加载到GridView时如何在gmail中显示Loader图像？

2 个答案: