javascript - jQuery detect when content is loaded -
i building ajax filter, replacing container on page. after content appended dom need foreach each block of newly appended content , height of , set each of them max height. here tricky part.when content appended images not loaded, cannot calculate accurately height of whole block. here code.
$.ajax({ ... success: function(html) { $('#product-pagination-container').html(html); adjustboxheights(); //sroll products /* $('html,body').animate({ scrolltop: $('#product-pagination-container').offset().top}, 'slow'); */ }, error: function(err) { console.log(err.responsetext); } }); function adjustboxheights() { var maxheight = 0; $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){ $(this).height('auto'); if (maxheight < $(this).height()) {maxheight = $(this).height()} }); $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){ $(this).height(maxheight); }); }
a working solution run adjustboxheights after timeout, dont it.
if in control of html being appended dom, can give image elements common class name , set load
event callback elements belonging class. in ajax "success" callback.
in subsequent load
event handlers, height
of appropriate parent/ancestor element.
assuming images coming in ajax call belonged img
class, this:
$.ajax({ ... success: function(html) { $('#product-pagination-container').html(html); // now, dom has been updated inlcude new images, can // find them in dom , set load event callback each: array.prototype.slice.call(document.queryselectorall("img")).foreach(function(pic){ // each images finishes loading, adjust box heights: pic.addeventlistener("load", adjustboxheights); }); //sroll products /* $('html,body').animate({ scrolltop: $('#product-pagination-container').offset().top}, 'slow'); */ }, error: function(err) { console.log(err.responsetext); } }); function adjustboxheights() { var maxheight = 0; $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){ $(this).height('auto'); if (maxheight < $(this).height()) {maxheight = $(this).height()} }); $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){ $(this).height(maxheight); }); }
Comments
Post a Comment