我正在开发一项功能,在下载实际图像之前,我可以使用动画图像显示加载进度。
我有一个包含大量图像的页面,我循环遍历记录并使用转发器控件显示它们。下面是代码 HTML-CSS 的示例
<asp:Repeater ID="rpt4x42" runat="server" EnableViewState="False">
<ItemTemplate>
<asp:HyperLink ID="hylTopFour2" style=" text-decoration:none;" runat="server"
NavigateUrl='<%# getURL(Eval("ArticleID")) %>' BorderWidth="0px" meta:resourcekey="hylTopFour2Resource1">
<div id="articleContainer2" class="articleContainer" >
<div id="ArticleImgHP-container" >
<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP"
border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>' />
</div>
<div class="Details4x4">
<div class="Title4x4" >
<asp:Label ID="lblTopFourTitle" runat="server" Text='<%# getTitle(Eval("ArticleTitle")) %>'></asp:Label>
</div>
<div class="hLine4x4"></div>
<div class="dateWrapper4x4">
<div class="Date4x4">
<asp:Label ID="lblTopFourDate" runat="server"
Text='<%# FormatDate(Eval("[ArticlePublishDate]")) %>'></asp:Label>
</div>
</div>
</div>
</div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
</div>
CSS
img.ArticleImgHP {
/* Set the width and height to the size of its container */
width : 100%;
height : 100%;
visibility : hidden;
}
div.ArticleImgHP-container {
width : 170px;
height : 112px;
background-image: url('../images/loading-circle.gif');
background-position: center center;
background-repeat: no-repeat;
}
jQuery
$(document).ready(function () {
// $("img #MainContent_rpt4x42_imgTopFourImg2_1").bind("load", function () { $(this).show(); });
$("img.ArticleImgHP").bind("load", function () { $(this).css("visibility", "visible"); });
});
我已经将实际图像包裹在一个 div 标签中,我想显示这个 div 标签的背景图像,直到下载实际图像。我无法让它工作。在这方面,我将不胜感激。
我试图让同样的东西在 jsFiddle 上运行它不工作 http://jsfiddle.net/t5d39/13/
最佳答案
通过将类添加到 div 标签来解决
<div id="ArticleImgHP-container" class="ArticleImgHP-container">
关于jquery - 显示加载图像进度,直到在 ASP.Net webform 中下载实际图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10266114/