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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -