Question

我在转发器中加载图像，但加载需要一些时间我想显示加载图像，直到转发器使用JavaScript加载所有图像。有什么帮助吗？

<asp:Repeater ID="rptconvention" runat="server">
    <ItemTemplate>
        <div style="float:left; width:200px;height:180px">                           
            <a title="<%# Eval("Description")%>" href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;lightbox[height]=450&amp;Imgid=<%#Eval("ID")%>&EventID=<%#hdn_EventID.Value%>&CategoryID=<%#hdn_categorID.Value%>" class="lightbox textColorBlue">        
                <img  src='<%= Settings.FransupportURL %><%# "Convension/images/" & Eval("Img")%>' alt='<%#Eval("Name")%>' Width="180px" Height="120px" style="border:0px;"   />
            </a>
            <div style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:12px;">  
                <%# Functions.StringTruncate_New(Eval("Description"), 25)%>
            </div>           
            <div style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:13px;"> 
               <a style="width: 81px!important;" href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;lightbox[height]=450&amp;Imgid=<%#Eval("ID")%>&EventID=<%#hdn_EventID.Value%>&CategoryID=<%#hdn_categorID.Value%>" class="lightbox textColorBlue">View</a> | 
               <asp:LinkButton class="textColorBlue"  id="btndownload" CommandName="Download"  CommandArgument='<%#Eval("DownLoadImg")%>' runat="server"   >Download </asp:LinkButton> 
            </div>
        </div>
        <div class="dvSpacingConv"> &nbsp;</div>
    </ItemTemplate>
    <FooterTemplate>

    </FooterTemplate>
</asp:Repeater>

Answer 1

如果您愿意在页面上的UpdatePanel内包装转发器和其他控件，则可以使用UpdateProgress控件，如下所示：

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/PathTo/Loading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

注意：如果您只想在UpdateProgress控件中添加文本，请将<span>替换为<image>，并在内容加载时写下您想要显示的任何消息。

Answer 2

在此代码中，微调器将在网页中旋转十秒钟。

1.从谷歌下载ajax loader.gif。

2.使用此代码替换该图像..

3.相应地设定时间..

<div id="spinner" style="display: none;">
<span id="ss" style="float: left; margin-left: 50% !Important; margin-top: 22% !Important;">
<img src="ajax-pink-loader.gif" alt="Loading..." />
</span>
</div>

我已完成提交点击，更改页面加载...

$("#ssubmit").click(function () {
    $("#spinner").show();
    setInterval(function () {
        $("#spinner").hide();
    }, 10000);
});

如何使用javascript显示加载图像，直到转发器加载所有图像

2 个答案: