Lazyloading background images

I am working on a fullpage fragment (theme), and to make the (background) images fill the whole screen I use


As there might be a lot of images, like

I wonder: Is there a way to 'lazy load' these images?

As far as I know, collective.lazysizes works (only) with img tag, so I suppose that will not work. Is there a smart way to do this?

lazy loading background images referenced in CSS files is unnecessary and makes no sense to me:

BTW, collective.lazysizes lazy loads images, iframes and tweets.

maybe I got this wrong.

Anyway: it seems to me that the page that uses background images:

is slower than the 'img' one (work still in progress)

(just a feeling as I am trying this from home without any real tools)

your site is slow because the front end is extremely bad configured: requests are most of the time blocked and images are not being cached.

seems you're serving it directly from Zope and not using at all.

instead of hacking background images loads you should fix those things.

Yes, it is not configured at all ( I am just using the site I have to demo collective.multitheme) to test.

In fact, I am trying to add a fullpage fragment, as requested here:

(which is also available at the multitheme demo site:

So the 'real question is': Is there something that should be done different in the template, to make the images load faster?

If anyone has some spare time, the fragment is here:

maybe this JS will help

Works also with Background-Images, used by style-Attributes...

1 Like

Thanks, this looks like what I need