Lazy load featured image loading info/animation

Hey Morten,

That’s a tough one. If you’re comfortable writing Javascript and CSS I can outline the process, but it’s a bit complicated.

As an alternative, one way to make the images load faster is by compressing them. For instance, this image here is 241kb, but if you compress it with compressor.io, it can be shrunk down to 117kb without losing any quality. This will essentially make the image load twice as fast.

It’s not as sexy as having a spinner/loading indicator, but it is much simpler to implement.

Thanks Ben,
I know that I’ll get a better performance with smaller/compressed images, but the images are automatically saved from my network camera and updated every 2-3 minutes so manual compression is not possible. I’m willing to give it a try if you could outline the process for the js and css and where to put it in the theme files. ??

All the best
Morten Haugen
Lysefjordcam

The first step is to edit the featured image function to add a spinner icon. I believe you have a modified version of the featured image function already? Tracks already loads Font Awesome, so you can get one from there. The spinner icon will be hidden by default with CSS in your child theme’s style.css.

Then enqueue a javascript file via the functions.php file in your child theme with a script to add a class to the spinner when the image is being loaded, and remove the class when the image is finished loading. This way the spinner will show only when the image is loading, and then be hidden again after being loaded.

Thanks Ben,
I might be over my head on this one, but I’ll roll up my sleeves and jump in.

All the best
Morten