javascript - jquery Waterfall plugin's wait until images load not working -

javascript - jquery Waterfall plugin's wait until images load not working -

i using waterfall plugin jquery on site. using jquery 1.9.1 , using knockout.js js viewmodel. info ajax phone call web api service homecoming json objects knockout viewmodel. images blobs within azure storage container.

waterfall plugin home

i initialize plugin in next way op indicates in this question:

$(window).load(function () { // apply jquery waterfall plugin $("#productlist").waterfall({ colminwidth: 230, defaultcontainerwidth: 970, autoresize: true }); $('#productlist').load(function () { $("#productlist").waterfall('reflow'); }) });

i utilize window.load function because understand, waits dom elements load.

problem:

but when site loads first time, no cache, waterfall plugin not render (as in object sizes not applied page overlap , page height short page objects). if refresh page waterfall plugin renders every page request after first page load.

i tried placing waterfall initialization in next page function:

$(document).ready(function () });

but same problem exists.

google chrome dev tools not showing js errors on page.

question

can help me waterfall plugin fire after imgaes have loaded.

thanks in advance.

further detail:

here knockout.js html template:

<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 total detail"> <img data-bind="attr: { src: url300 }"> </a> <%-- title panel-------------------------------------------------------------------------------------------------- --%> <div class="kr_pr_box_detail"> <a data-bind="attr: { href: detailurl }" title="view total detail"> <label data-bind="text: name"></label> </a> <label data-bind="text: shortinfo" class="kr_pr_box_caption"></label> </div> <%-- cost 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 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 cart" commandargument='<%# eval("productid")%>' /> </div> </asp:panel> </div> </div> </div>

this html gets rendered (i included first element in ko repeat brevity):

<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 total 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 total 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 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 cart" href="/moduledevelopment/krisisstore.aspx"> <i class="fa fa-shopping-cart"></i> </a> </div> </div> </div> </div>

looks little complex, here have simple option: bootstrap-waterfall, recommended.

javascript jquery ajax knockout.js waterfall