0

I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions. I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.

Anybody have any other ideas?

SpyLefkaditis
  • 1
  • 1
  • 3

2 Answers2

0

You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.

imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded

corygibbons
  • 401
  • 3
  • 8
0

You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry

if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set

Magnus
  • 153
  • 6