jquery瀑布插件's等待图像加载不起作用
jquery Waterfall plugin's wait until images load not working
我在我的网站上使用jQuery的瀑布插件。我使用的是jQuery 1.9.1,我的js视图模型使用的是Knockout.js。数据来自对web api服务的ajax调用,该服务将JSON对象返回到敲除视图模型。这些图像都是azure存储容器中的斑点。
瀑布插件主页
正如OP在这个SO问题中所示,我以以下方式初始化插件:
$(window).load(function () {
// apply jQuery Waterfall plugin
$("#ProductList").waterfall({
colMinWidth: 230,
defaultContainerWidth: 970,
autoresize: true
});
$('#ProductList').load(function () {
$("#ProductList").waterfall('reflow');
})
});
我使用window.load函数是因为据我所知,它会等待所有Dom元素加载。
问题:
但是,当网站第一次加载时,在没有缓存的情况下,瀑布插件无法正确渲染(因为对象大小没有应用于页面,因此它们重叠,并且页面高度对所有页面对象来说都太短)。但是,如果我刷新页面,瀑布插件会在第一次页面加载后正确地呈现每个页面请求。
我还尝试将这个瀑布初始化放在以下页面函数中:
$(document).ready(function ()
});
但同样的问题也存在。
谷歌chrome开发工具没有在页面上显示任何js错误。
问题
有人能帮我在所有imga加载后启动这个瀑布插件吗。
提前谢谢。
更多详细信息:
这是我的knockout.js HTML模板:
<div id="ProductList" class=""
data-bind="template: {
foreach: filterProducts,
beforeRemove: hideProductElement,
afterAdd: showProductElement,
afterRender: reFlow
}">
<div>
<input type="hidden" data-bind="text: ProductId">
<div class="kr_pr_box">
<%-- BANNER PANEL-------------------------------------------------------------------------------------------------- --%>
<div data-bind="if: StatusName">
<div class="kr_pr_box_banner_box">
<span id="dnn_BannerLable" class="kr_pr_box_banner" data-bind="text: StatusName"></span>
</div>
</div>
<%-- IMAGE PANEL-------------------------------------------------------------------------------------------------- --%>
<a data-bind="attr: { href: DetailUrl }" title="View Full Detail">
<img data-bind="attr: { src: Url300 }">
</a>
<%-- TITLE PANEL-------------------------------------------------------------------------------------------------- --%>
<div class="kr_pr_box_detail">
<a data-bind="attr: { href: DetailUrl }" title="View Full Detail">
<label data-bind="text: Name"></label>
</a>
<label data-bind="text: ShortInfo" class="kr_pr_box_caption"></label>
</div>
<%-- PRICE PANEL-------------------------------------------------------------------------------------------------- --%>
<label data-bind="text: formatCurrency(Price)" class="kr_pr_box_price"></label>
<%-- CART PANEL-------------------------------------------------------------------------------------------------- --%>
<div class="kr_pr_box_addcart">
<asp:HyperLink runat="server" ID="CartLink" ToolTip="Add to Cart" NavigateUrl="~/ModuleDevelopment/KrisisStore.aspx">
<i class="fa fa-shopping-cart"></i>
</asp:HyperLink>
</div>
<%-- EDIT / DELETE PANEL -------------------------------------------------------------------------------------------------- --%>
<asp:Panel ID="AdminPanel" runat="server" Visible="false">
<div class="kr_pr_box_admin">
<asp:HyperLink ID="lnkEdit" runat="server" ResourceKey="EditProduct.Text" Visible="false" Enabled="false" />
<asp:LinkButton ID="lnkDelete" runat="server" ResourceKey="DeleteProduct.Text" CommandName="DeleteProduct" ToolTip="Add to Cart" CommandArgument='<%# Eval("ProductID")%>' />
</div>
</asp:Panel>
</div>
</div>
</div>
HTML就是这样呈现的(为了简洁起见,我只在ko repeat中包含了第一个元素):
<div id="ProductList" class="" data-bind="template: {
foreach: filterProducts,
beforeRemove: hideProductElement,
afterAdd: showProductElement,
afterRender: reFlow
}" style="position: relative; min-height: 1112px;">
<div style="position: absolute; width: calc(25% - 0px); transform: translate3d(calc(0% + 0px), 0px, 0px);">
<input type="hidden" data-bind="text: ProductId"></input>
<div class="kr_pr_box">
<div data-bind="if: StatusName"></div>
<a data-bind="attr: { href: DetailUrl }" title="View Full Detail" href="http://www.dnndev.me/Module-Development/Krisis-Store/ctl/Detail/mid/2601/id/17/item/Test-Product-62">
<img data-bind="attr: { src: Url300 }" src="https://giselledenis.blob.core.windows.net/products/product-name-Medium300.jpg">
</a>
<div class="kr_pr_box_detail">
<a data-bind="attr: { href: DetailUrl }" title="View Full Detail" href="http://www.dnndev.me/Module-Development/Krisis-Store/ctl/Detail/mid/2601/id/17/item/Test-Product-62">
<label data-bind="text: Name">Test Product 62</label>
</a>
<label data-bind="text: ShortInfo" class="kr_pr_box_caption">A test product for krisis store</label>
</div>
<label data-bind="text: formatCurrency(Price)" class="kr_pr_box_price">$175.00</label>
<div class="kr_pr_box_addcart">
<a id="dnn_ctr2601_View_ctl00_CartLink" title="Add to Cart" href="/ModuleDevelopment/KrisisStore.aspx">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
</div>
</div>
</div>
看起来有点复杂,这里我们有一个非常简单的选项:强烈建议使用bootstrap瀑布。
相关文章:
- 在通过child.print()打印之前,我如何等待图像加载到我的新窗口中
- 在阵列中预加载图像(并等待图像下载)
- HTML,使页面看起来准备就绪(没有选项卡旋转轮),而只是等待图像
- Javascript - 等待图像加载
- Jquery ajax,等待图像或iframe完全加载后再启动函数
- jquery瀑布插件's等待图像加载不起作用
- 等待图像加载后再继续
- jQuery/JS等待图像宽度调整
- 在动画之前等待图像重新加载
- 在等待图像加载时使用旋转器
- 如何让jQuery等待图像列表加载后再处理它们
- Html2canvas等待图像加载
- JQuery:等待图像src属性被加载
- 如何在firefox中等待图像加载时制作加载图像
- 如何阻塞UI,直到页面加载等待图像使用javascript/CSS只
- 使用ajax + jquery's after()函数,现在等待图像加载
- 有没有办法知道当外部CSS在已应用,但没有等待图像加载
- 允许Meteor.js在调用Plugin之前等待图像加载
- Jquery 加载文件以在加载 DOM 时执行(而不是等待图像)
- 等待图像完全加载后再显示在页面上