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.
I’m stumbling against the fact that ghost essentially creates the html for the images I upload through the editor, and I can’t figure out how to get ghost to create it in such a way that I can use the more involved method using javascript and viewport/observer API with a placeholder src= and an actual data-src=. This page LazyLoad Images in Simple Steps for Casper Theme on Ghost shows some handlebars but I’m having difficulty a) understanding exactly where to put those handlebars and what modifications I may need to make (if any) and b) most of the rest of the instructions to be honest.
Feeling pretty dumb right now, so any help given would be greatly appreciated.
What’s the reason for doing that? All browsers have supported lazy loading natively for quite a while now so there’s no requirement for javascript and observers which was why Ghost was able to add the loading="lazy" attributes to the rendered images.
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.
If your site performs well, you shouldn’t notice the images loading after the initial page render is finished.
With normal scrolling, i.e., not whizzing down the page, lazy loading images is done just before reaching the page fold, so there should be no transition.
Even when whizzing through a page images should “pop” open. Maybe share your URL?