[Support request] Lazy Loading Images

[Michelle]

Hi Tom,

So we just redesigned a theme to move over to GP & we had issues with a masonry blog style look where the images don’t line up & there’s space in between them.

We figured out It was the plugin A3 Lazy Load, so I posted in the FB group & others said they had the same issues with different lazy loading plugins so it sounds like it’s a GP issue.

Thanks & I hope you are well.

[Leo]

Hi there,

The lazy load script would need to be reloaded after masonry/infinite scroll does its thing.

Does A3 Lazy Load have any instructions relating to reloading/initiating their script under these circumstances?

[Michelle]

Hi Leo,

The only thing it offers is to load it in the script & we have it set to load in the footer.

So that doesn’t help b/c there’s nothing there about reloading their script.

[Tom]

You could try something like this in a Hook Element (wp_footer) hook:

<script>
var masonry = jQuery( '.masonry-container' );

masonry.on( 'load', function() {
    masonry.masonry( 'layout' );
} );
</script>

[Michelle]

Hi Tom,

How are you doing?

Yeh, but this must be a bug since it’s happening on all of those types of plugins, no? So code won’t fix it & yes we tried, but it didn’t.

Thanks

[Tom]

It’s not a bug, it’s just how masonry works as far as I know. When masonry loads, it positions each grid item using absolute positioning. To do this, it needs to calculate the sizes of each grid item.

If the images aren’t there when that calculation takes place, it will be wrong and needs to be updated once the images load.

That’s why Leo asked if they offer any trigger we can hook into once an image is loaded, so we can tell masonry to recalculate.

[Michelle]

Hi Tom,

Yes, but it wasn’t just this one plugin which is why we brought it to your attention.

Unfortunately, we don’t know if there’s a trigger, but even if you fixed it for this one plugin, it’s still an issue with the other plugins.

Could it be based on the new lazy loading feature that WP has?

Maybe there’s a common feature there.

We got it working, but we had to turn it off to do that.

We just thought you should know for others & any new sites.

Thanks

Michelle

[Tom]

I’ll play with it to see if there’s anything we can do on our end. A trigger is usually best.

Glad you got it working for now 🙂

[Author]

Posts