Smugmug gallery images distorted with lazy loading plugin enabled

I have explained this on quite a few other threads – the way lazy loading works is at odds with how non-regular layouts work.

To get a justified grid the right way (i.e. columns are not of a fixed height and the last row aligns perfectly with all others), you MUST know all image sizes (heights and widths). And to know all image size you have to finish downloading all images… and lazy loading prevents that from happening. That is why you end up with square grids when you start out, since lazy loading puts in some arbitrary placeholders. There is no way you can get around it, as there is no way to find an image’s dimensions without loading the image.

So you have a few alternatives:

1. Use the “Load More” feature. The concept might be “so 2012” in your words, but it also serves to add less bloat to your page – it doesn’t slam a mobile device with unintended data usage when you scroll down a page to make lazy loaded photos visible. So maybe being an old concept is not a bad thing?
2. Switch to a layout that relies on square thumbnails. This doesn’t give you too many options, since the only square thumbnail offered by SmugMug is 150px. There was a way to use custom square thumbnails in Photonic for SmugMug several years back, but that seems to be broken currently. I can put that back, but again, the nicest layouts you get with this option are large square thumbnails of the same size.
3. Pick smaller tile sizes. On the page you have shared you are loading 371 photos, each at maximum resolution. At an average of 1.5MB, this is causing your page to load over half a gigabyte of data! The fact is, even with lazy loading enabled you are not going to get around this – to load your full page your users will have to fetch 556MB. If, instead, you pick a different tile size (Photonic → Settings → SmugMug → SmugMug settings → Tile Image Size), you can significantly reduce the load time for your page. A smaller size, like the “Medium” size will probably bring down the total bandwidth consumption to 50-60 MB.
4. Figure out a way to hook in a window resizing event in your lazy loading plugin. This goes to your point:
   

   Oh, one more thing … if I resize the browser window, any images in the viewport will correct themselves to the proper aspect ratio. If you then scroll south, problem returns until browser is resized again. (Tried Firefox and Chrome on a Mac)

   Whenever you resize your window, Photonic recomputes the layouts – particularly the Justified Grid, Masonry and Mosaic layouts. It has to do this because of screen-size changes. By that time if your lazy loading scripts have loaded some new photos, the photos’ actual dimensions will be used by Photonic to recompute the layout. That is why resizing shows the loaded images correctly.
   So, if your lazy loading plugins offer a hook to add some custom JavaScript, you can simply trigger a window resize each time the lazy load finishes on a particular image. See here for examples. If your lazy load plugin is using jQuery you can use:
   $(window).resize()

Thanks for this clear description of the issue. Awesome support!

I had searched the forum for an answer but may have been using the wrong terminology.

I’ll try your suggestions and may have to end up using a load more button. Viva la 2012!