We often use images when building websites, so it's no surprise that we would like to use them in conjunction with Masonry. To avoid the common issue of the Masonry elements not aligning correctly when the dimensions of the images are not available when Masonry initially runs, we need to wait until the images have finished loading before applying Masonry. Luckily, Masonry comes shipped with a plugin called
imagesLoaded for image support. We use
imagesLoaded to wait for the images to finish loading, after which we need to let Masonry measure the images properly.
In the code bundle for this book, open the
3-images-loaded.html file in your preferred text editor to follow along.