Hi there. I’ve been taking some time to make my own flavor built off the base Casper image, in most everything I’ve attempted I’ve been successful, but I just can’t seem to wrap my head around lazy loading of images. For the most part I think I get it, except the hurdle I know I’m falling at is the first one (there may be more): how can I get Casper to use data-src instead of src in the img tag?
Both the index.hbs and the post.hbs have sections for images, and I’ve tried adding in the browser function of loading="lazy" to both of these as per this site Lazy Loading Images – The Complete Guide (which also has great info in general about methods for lazy loading) but as far as I can tell it’s not being picked up.
Feeling pretty dumb right now, so any help given would be greatly appreciated.
Initially because loading="lazy" didn’t seem to be working. Taking a closer look at network in console though, it seems that it is working, just a lot faster than I was anticipating.
Next step would be to use either dominant color or low quality to act as the place holder. I may have missed it, but that didn’t seem an option either for loading="lazy". I guess I could look at a delayed transition or something similar instead?
Isn’t that a good thing, i.e., the user doesn’t wait for an image to load? An image appears as it moves over the fold to the area displayed.
Why? Images above the fold are loaded, and those below are not until the user starts scrolling. Image attributes define the size of the image, so there is no need for a placeholder or low quality image.
100% yes a good thing, it’s doing what it should, so I suppose I should edit my initial post.
Page performance is ok, not as high as I’d like but close. It’s actually more of an aesthetic thing for me at this point, I like the idea of a soft fade in/appear type of transition, which I thought I could utilize lazyload to do.