Lazysizes: Lazysizes <picture> with masonry and jquery-match-height plugins

[jamiemagique]

Hello!

Is it possible to have lazysizes work with the following plugins (also using <picture> markup):

1. https://github.com/desandro/masonry
2. https://github.com/liabru/jquery-match-height

The problems I'm seeing are:

1. masonry isn't updated when lazysizes shows the images when inside masonry - can't see a lazysizes complete callback to trigger a masonry reload or update
2. jquery-match-height inline height isn't updated once image has been lazy loaded in - again no complete callback to call the match height update function

The event listener 'lazybeforeunveil' seems to get called too early to call any update functions for these plugins, although sometimes attached the update functions to this listener does work but it is very buggy.

Having said that pinging out multiple calls each time an image has loaded isn't a very good idea, is there a way to have the placeholder image set to the correct height before lazysizes does it thing?

I am using the example <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload"> as my fallback image inside <picture>

Any help would be greatly appreciated.
Jamie

[aFarkas]

You won't need a special event by lazySizes. The browsers event load should be just fine. I also would recommend to use native addEventListener in combination with event capturing to do this instead of jQuery event binding (jQuery does not support event capturing).

Code could look something like this:

$('.masonry-container').each(function(){
    var $masonry = $(this);
    var update = function(){
        $.fn.matchHeight._update();
        $masonry.masonry();
    };
    $('.items', $masonry).matchHeight();
    $masonry.masonry();
    this.addEventListener('load', update, true);
});

But you are absolutely right. I would recommend that you try to specify the width and height with your CSS another option is the aspectratio plugin. (Note: the aspectratio plugin is still beta, would love to here some feedback.)

[aFarkas]

BTW: Here is an example using isotope

[rolfnl]

Seriously, there's no need to try and reply to issues sinces @aFarkas is always super fast to respond :)

I haven't tried this but I was about to type the same sort of answer. Can you try this solution? Perhaps you put online a demo page to test.

[jamiemagique]

Thanks @aFarkas this is very helpful and appears to be working great. I will look into your aspectratio plugin as well though as looking for the best solution to push to a site that has just recently launched.

[aFarkas]

@jamiemagique
Happy to help.

@rolfnl
I try to be more lazy next time.

[alexcapes]

I've just used this solution from @aFarkas on a project:

$('.masonry-container').each(function(){
    var $masonry = $(this);
    var update = function(){
        $.fn.matchHeight._update();
        $masonry.masonry();
    };
    $('.items', $masonry).matchHeight();
    $masonry.masonry();
    this.addEventListener('load', update, true);
});

It works well, however I'm seeing the masonry items shift a couple of pixels left/right on page load and then on image load as you scroll down the page.

If I disable the animation on masonry, this eliminates the issue, but I'd rather keep the masonry animation if possible.

Any idea how I can avoid these little shifts in items while keeping the animation?

[mzaguilar7]

Have you tried adding this code
$.fn.matchHeight._maintainScroll = true;
before
$.fn.matchHeight._update();