Only apply jQuery waterfall 'reflow' after the images have loaded

Question

i am using jQuery waterfall for my grid style display.

To stop the common images overlapping issue i have wrapped the waterfall method in a .load() function such as:

$(window).load(function(){
  $('#buildcontainer').waterfall({ 
    colMinWidth: 260, 
    defaultContainerWidth: 1000,
    autoresize: true
  });
});

The images overlap because the waterfall function is called before the images have fully loaded there for their height cannot be determined. Wrapping the function in the load function prevents this.

The problem is, i have a button which loads more database results via ajax and appends them to the container.

When the items are appended, the images overlap. jQuery waterfall comes with a 'reflow' function which re sorts all of the items inside the container.

In my ajax success i run it like so:

success: function(html) {                   
  $("#buildcontainer").append(html).waterfall('reflow');
}

The issue i see here is that the images are being appended, and then the waterfall function is being called but the images are not yet fully loaded.

Is there a way i can only run the waterfall('reflow') after the items have fully loaded. In the same style as the:

    $(window).load(function(){
    });

I have tried wrapping the line where the items are appended into this function, i have also tried just appending the items and then applying the reflow inside a .load function but both of these dont append any items.

Any help / ideas on what to try next? Thanks!

Note: The images dont overlap in FF, but do in chrome and safari.

Thanks!

Answer 1

Have a look at the imagesLoaded library / jquery plugin: http://imagesloaded.desandro.com/

Answer 2

Try this in your success function:

success: function(html) {

$("#buildcontainer").append(html);

var loaded = 0,
imgs = $("img"),
totalImgs = imgs.length;

imgs.load(function() {
    ++loaded;

    // Check if all images have loaded
    if (loaded === totalImgs) {
        // Run waterfall
        $('#buildcontainer').waterfall('reflow');
    }
});

}

Answer 3

Assuming all the images are being added in here:

success: function(html) {                   
  $("#buildcontainer").append(html).waterfall('reflow');
}

Then, you can do the following to monitor them all after adding them:

success: function(html) {

  function checkCnt() {
      if (remainingCnt === 0) {
          $("#buildcontainer").waterfall('reflow');
      }
  }

  var remainingCnt = $("#buildcontainer").append(html)
    .find("img")
    .filter(function() { return !this.complete; })
    .load(function() {
        // one more is loaded now, see if they are all loaded
        --remainingCnt;
        checkCnt();
     }).length;
  checkCnt();
}