0

リピーターで画像を読み込みますが、読み込みに時間がかかります リピーターが 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>
4

2 に答える 2

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>

注: コントロール内にテキストだけが必要な場合は、 を aにUpdateProgress置き換えて、コンテンツの読み込み中に表示したいメッセージを記述します。<span><image>

于 2013-09-06T12:43:20.887 に答える
0

このコードでは、スピナーが Web ページで 10 秒間回転します。

1.Google から 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);
});
于 2013-09-06T12:47:34.493 に答える