如何使用 Java 脚本显示加载图像，直到中继器加载所有图像

how to show loading image using java script until repeater load all images

本文关键字：加载 图像 中继器 脚本 显示 何使用 Java      更新时间：2023-09-26

>我在中继器中加载图像，但加载需要一些时间我想显示加载图像，直到中继器使用 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>

如果您愿意将转发器和其他控件包装在页面上的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>，并编写要在加载内容时显示的任何消息。

在此

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

1.从谷歌下载一个ajax加载器.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);
});
相关文章：