Using Lozad plugin for Background Images

Hi there,

I’m in the process of adding lazy loading to the content areas of my website and am having problems with lazy loading elements with a background image, using the plugin Lozad. More details about Lozad and the implementation can be found at https://github.com/ApoorvSaxena/lozad.js/blob/master/README.md

I’ve followed the guide and setup a codepen to help explain my issue - the following example includes both a div with a background image and an inline image. When either element comes into the viewport, the element should fade in using the CSS class “fade”. I’ve managed to get the inline image working but although the div element states “data-loaded=“true”” when you inspect it, the element itself is not being triggered to appear by Lozad. All elements are setup to use the class “lozad” to appear.

https://codepen.io/Shoxt3r/pen/pXZBoa

Any thoughts please?

Hi there,

Sorry, looks like Imgur is having problems serving the images I’ve referenced in my example - switched to using placeholder.com images instead :slight_smile:

Updated: https://codepen.io/Shoxt3r/pen/pXZBoa

Thanks!

No idea what I’m doing but does this work?

https://codepen.io/paulobrien/pen/rEZMPE

1 Like

Hi @Shoxt3r, by providing a load callback you’re overriding the regular behaviour, so lozad itself won’t show the images for you any more; and in your load() implementation you only handle src attributes, not CSS background-image properties. Like @PaulOB suggested, you might just use the data-toggle-class attribute instead of adding those classes manually.

BTW your inline image isn’t actually getting lazy loaded as you’re setting the src from the start – I guess that should be data-src.

1 Like

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:
https://codepen.io/Shoxt3r/pen/BgOdPw

With additional content below image:
https://codepen.io/Shoxt3r/pen/xoaLBb

The background-image example is working perfectly though!

EDIT:
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!

EDIT 2:
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.

Well with lozad you don’t need any throttling at all – that’s the point of using the intersection observer API. :-) And yes, lazy loading is certainly a good idea if you have more than just a few images.

Ah thanks for clearing that up.

How could I go about testing the fading effect works with Lozad without throttling it via DevTools? As above the images “pop” in before the CSS animation has time to fire.

Oh sorry I didn’t read your comment properly… I thought with throttling you meant throttling the callback. ^^ My bad. Your pen works fine for me even with 3G though.

No worries at all!

Hmm strange - when I get the full site up and running on a live server I’ll report back, probably something wrong with my local setup.

Thanks in the meantime all!

3 Likes