Thanks both for your replies!
However, when I test Paul’s version with the inline image it loads correctly - but if I alter the placeholder image’s width to 200 for example it does not fade in (if I add some content below it, it will work though).
Without additional content below image:
With additional content below image:
The background-image example is working perfectly though!
Hmm, scratch that - both of my above examples seem to work fine (editing Paul’s example is still a bit glitchy weirdly, maybe a bug with Codepen?).
When I apply the same code setup to my own local version of my site, the images are loading in either too quickly for the fade animation to fire (with inline images) or in the case of background images the fade is loading on the element, and then the background image loads in as it would normally, creating quite a jarring effect.
I’m testing this on my local machine with Chrome DevTools and throttling it to “Slow 3G” via the Network tab - unsure if that’s massively reliable for testing though?
Do you personally think lazy loading images in this way is a good approach or a bit of a waste of time? There seems to be a lot of pitfalls to overcome, and with these plugins in particular (I’ve so far tried Lozad and Lazy - see http://jquery.eisbehr.de/lazy/), a lot of work to make them treat srcset, inline and background images the same - nevermind adding tags for each image so that you have a fallback.
Thanks for your help and pointers so far!
It seems to be when I don’t use the throttling the fade-in works fine in all instances. As soon as I attempt to throttle it, there’s a mismatch between the images loading and fading.