How to properly stack masonry layout and lazy loading images?

Question

Okay so I'm making a masonry layout style gallery for Wordpress with lazy loading, and lightbox, using Advanced Custom Fields.

I have the lightbox (fancybox-v3) and masonry layout (macy.js) working but when I add in the lazy loading I run into problems. I'm using jQuery.lazy

Here's my loop

<?php

// check if the repeater field has rows of data
if( have_rows('card') ):

    // loop through the rows of data
    while ( have_rows('card') ) : the_row();

        // display a sub field value inside a card
        ?> <div class="grid-item">
            <?php
            //VARIABLES//
            $title =  get_sub_field('card_title');
            $childImage = get_sub_field('card_picture');
            $file = get_sub_field('card_video');
            $video = $file['url'];
// check for image
            if( $childImage ): ?>
                <a data-fancybox="gallery" data-caption="My caption" href="<?php
                echo $childImage['url'];//big one here ?>">
                    <img class="lazy" data-src="<?php echo $childImage['url']; ?>">
                </a>

            <?php endif; ?>
//check for video
            <?php if( $video ): ?>
                <video class="gallery-video" loop autoplay>
                    <source src="<?php echo $video; ?>" type="video/mp4">
                </video
            <?php endif; ?>

        </div> <?php

    endwhile;

else :

    // no rows found

endif;

?>

When I run this with jQuery.lazy and macy.js I get a wonky visual result like this:

What you see there at the bottom is a bunch of the images overlapping each other I'm guessing this is because they are being lazy loaded, macy.js doesn't know how to space them out by height.

I don't know how to fix this though? Any suggestions?

Also I found this answer on this question Masonry and Lazy load integration

By klasske that seems to answer, but I'm not sure I understand it (I'm a designer who is new to coding)

Basically Klasske is saying they should create a new function called adjustHeights that they then call inside the options for the jQuery.lazy right? I wasn't clear on that.

My guess is it's doing the layout before the images have loaded. Hard to tell without a [mcve] though. You can try implementing something like https://imagesloaded.desandro.com/ and invoking macy after that returns. — Michael Coker, Jun 16 '17 at 23:26
@MichaelCoker Yeah that seems to be the issue to me too. This might be a dumb question, but is the macy.js init script that I run basically the same thing as running macy again? So if I insert macy init function into the images loaded function it will basically run Macy every single time all images are loaded, right? I'm not clear on the relationship between functions and calling functions inside the — Aslan French, Jun 16 '17 at 23:32
I think so. I haven't used macy.js so I'm not certain. But according to https://github.com/bigbitecreative/macy.js you might just be able to call `macy_instance.reInit();` instead of invoking the whole thing each time. — Michael Coker, Jun 16 '17 at 23:56
@MichaelCoker Oh excellent! This is perfect. I'm going to delve into this and see what I can figure out. Thank you :) ! — Aslan French, Jun 17 '17 at 00:20

score 0 · Accepted Answer · answered Jun 20 '17 at 23:47

I want to post the answer to this problem since future people might run into the same issue. I contacted the dev and basically I need to call a recalculate function on the masonry layout, which was placed inside of a function that fires everytime new images were loaded to the screen.

The final thing looked like this:

var macy_instance = Macy.init({
        container: '#grid',
        trueOrder: false,
        waitForImages: true,
        debug: true,
        margin: 0,
        columns: 3,
        breakAt: {
            1200: 3,
            940: 2,
            520: 1
        }
    });

macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);

How to properly stack masonry layout and lazy loading images?

1 Answers1