Lazyload and CSS background-image property

Question

Lazyload and CSS background-image property

Opened this issue 11 years ago · 3 comments

Hi! I've been looking at the documentation how to use the lazy loader with CSS background-image property instead of using tags, but I've not found anything.

Is there any way to do this?

Thanks a lot in advance.

Answer 1 · 2014-06-17T04:01:42.000Z

You don't need this tool to do that, actually. Using jQuery, you can loop through each div (say, with a class of .lazyload). So...

<script>
$('div.lazyload').each(function(){
    $(this).css('background-image',$(this).data('img_src'));
});
</script>

<!-- fallback -->
<noscript>
    <style>
        div.lazyload.image_1 {background-image:url(/path/to/image/1.jpg);}
        div.lazyload.image_2 {background-image:url(/path/to/image/2.jpg);}
        div.lazyload.image_3 {background-image:url(/path/to/image/3.jpg);}
        div.lazyload.image_4 {background-image:url(/path/to/image/4.jpg);}
        div.lazyload.image_5 {background-image:url(/path/to/image/5.jpg);}
    </style>
</noscript>

<html>
    <div class="lazyload image_1" data-img_src="/path/to/image/1.jpg"></div>
    <div class="lazyload image_2" data-img_src="/path/to/image/2.jpg"></div>
    <div class="lazyload image_3" data-img_src="/path/to/image/3.jpg"></div>
    <div class="lazyload image_4" data-img_src="/path/to/image/4.jpg"></div>
    <div class="lazyload image_5" data-img_src="/path/to/image/5.jpg"></div>
</html>

Answer 2 · 2014-06-17T07:19:05.000Z

Thanks a lot!

Answer 3 · 2016-05-05T03:34:42.000Z

I tried this, still all the background images are loaded even if they are below the fold. See it here:
http://onedayintime.net/gallery_fasterize.php