lazy load backgroung images in span tag

[ohno]

Hi,

I've implemented lazy loading on my website using this guide : -

https://web.dev/codelab-use-lazysizes-to-lazyload-images/

However I can't get the last bit of code to work! Basically I have images that are in a span tag loaded as a background image, I have this is the CSS : -

.blocks1 .block a span.thumb {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto
}

The page uses this tpl file for the images : -

{section name=c loop=$cats->mCats}
    <div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><span class="thumb" style="background-image: url({$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category});"></span><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>
{/section}

I thought this script may have worked : -

https://appelsiini.net/2013/lazyload-190/

But I couldn't get that to work either.

Any idea's whether this can be done & if so how?!

Many thanks for any help on this one

[ohno]

To add, I tried the latest version of the script : -

https://github.com/tuupola/lazyload#changelog

& tried modifying this code : -

let images = document.querySelectorAll(".example"); lazyload(images);

 

To the span name but still nothing, the rendered HTML of the image is like this :-

<span class="thumb" style="background-image: url(https://www.example.com/images/thumbnails/example.jpg);"></span>

I wonder if the lack of height & width maybe causing it? (this info is in the CSS file but I'll try adding it inline now)