Menu icon Foundation
Reflow Equalizer with Lazy Images

I'm trying to reflow Equalizer after lazy images are added. I'm not sure how to bind reflow, though.

I have this for the Foundation initialization:

<script>
  $(document).foundation('equalizer','reflow');
</script>
            

         

And this initializes the lazy load:

<script>
  var bLazy = new Blazy({
    success: function(e){
        console.log($(e).attr("src") + " loaded" );
  },
    error: function(ele, msg){
        console.log(msg)
  }
});
</script>
            

         

Lazyloading works fine, but Equalizer does not reflow. As images are added, the main content container expands in height and overlaps the footer (which is outside this container based on the template design).

How can I trigger a reflow of Equalizer each time a lazy load image is added?

ReflowLazy loadEqualizer

I'm trying to reflow Equalizer after lazy images are added. I'm not sure how to bind reflow, though.

I have this for the Foundation initialization:

<script>
  $(document).foundation('equalizer','reflow');
</script>
            

         

And this initializes the lazy load:

<script>
  var bLazy = new Blazy({
    success: function(e){
        console.log($(e).attr("src") + " loaded" );
  },
    error: function(ele, msg){
        console.log(msg)
  }
});
</script>
            

         

Lazyloading works fine, but Equalizer does not reflow. As images are added, the main content container expands in height and overlaps the footer (which is outside this container based on the template design).

How can I trigger a reflow of Equalizer each time a lazy load image is added?

Rafi Benkual about 4 years ago

There are some callback events that you can tie into,

$(document).on('after-height-change.fndtn.equalizer', function(){
  // do something after the height changes
});

Wesley Picotte about 4 years ago

Thanks. I wound up doing this:

<script>
$('img').on('load', function () {
$(document).foundation('equalizer', 'reflow');
});
</script>