Lazy loading images

[ericnewton76]

Given that we can generate a possible list of images with the actual width/height for calculations, is there a good way atm to due lazy thumbnail loading? I actually do have a few scenarios where theres >50 images in a gallery and all of them hitting my image resizer hard (which eventually saves the resize operation output) but first hit can produce 50 threads of resizing.

probably needs an additional property like lazyLoad: true on the options, and assumes that jquery.lazyload is available.

Or a thumbnailSrcAttribute property, defaults to 'src' but could be set to 'data-original' and jquery.lazyload could take over from there...

[nathanbiller]

I know it's possible because I've seen another person implement it and provide it as a shortcode for Hugo Static Site Generators. However, when they use it, they don't use the sizeRangeSuffixes option. When I tried to implement that same code, it was working for a bit. But then I added the sizeRangeSuffixes and it failed, so I'm guessing somewhere in the code when that's present, the swap happens automatically after the initial gallery is loaded. Ideally, I'd like to load a base64 encoded 1-pixel version and then lazy load the larger appropriate image as the user scrolls. But the sizeRangeSuffixes seems to prevent this. I'm not a talented enough programmer to root around in the code to see if there was some way to augment the sizeRangeSuffixes with a lazy load option, but hopefully, this could give you a place to start? https://github.com/mfg92/hugo-shortcode-gallery