Lazyloading background images

Plone Support Theming
1

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

'style=background-image'

As there might be a lot of images, like http://kunst.medialog.no/all-kunst

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?

2

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.

3

maybe I got this wrong.

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

http://kunst.medialog.no/all-kunst

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

http://kunst.medialog.no/all-kunst

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

4

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 plone.app.caching at all.

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

5

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: http://xweb14d.plana.dk:8081/Plone/fragments/fullpage-1#first-section

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:

6

Hi,
maybe this JS will help https://github.com/ApoorvSaxena/lozad.js.

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

1 Like
7

Thanks, this looks like what I need