0

我正在从数据库中搜索记录，在将记录加载到 gridview 之前，我想显示一些加载 gif，加载后它应该淡出

  <div id="dvLoading"></div>
     <head runat="server">
   <script type="text/javascript">
$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});
</script>

我的样式表

 #dvLoading
{
   background:#000 url(NewFolder1/loading-1.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

但是当我进行搜索时图像没有加载，如何让它出现和消失？

我的 HTML

    <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

   <script type="text/javascript">
  $('#dvLoading').fadeOut(2000);
</script>

</head>
<body>


<div id="dvLoading"></div>
<form id="form1" runat="server">
<div >

    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <br />
    <br />
    <br />
    <br />

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <Columns>
    <asp:TemplateField HeaderText="Firstname">
    <ItemTemplate>
     <%# Eval("FirstName") %>
    </ItemTemplate>
    </asp:TemplateField>
   <asp:TemplateField HeaderText="Lastname">
    </asp:TemplateField>
   <asp:TemplateField HeaderText="Gender">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Marital status">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Height">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Complexion">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Religion">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="State">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Mother tongue">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Education">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Occupation">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Annual income">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="emailid">
     <ItemTemplate>
     <%# Eval("EmailID") %>
     </ItemTemplate>
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Star sign">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Rassi">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Gothram">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="DOB">
    </asp:TemplateField>
     <asp:TemplateField HeaderText="Time of birth">
    </asp:TemplateField>


    </Columns>
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    </asp:GridView>



   </div>
    </form>
</body>
</html>
4

1 回答 1

0

就用这个

<script type="text/javascript">
 $('#dvLoading').fadeOut(2000);
</script>

工作演示

编辑

$('#form1').hide();
$('#dvLoading').fadeOut(2000);
$('#form1').show(2500);
于 2012-08-22T07:25:48.920 回答