How to apply lazy loading in background images [closed]

That is nothing that can be installed by a plugin or, at least, would be necessary for you to work on it.

However, you can build this yourself.

Step 1: Enqueue the IntersectionObserver polyfill you can find here: https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js to get Support for older Browsers.

Step 2: Change the code of your HTML-Elements which use a Background Image. Add a class (let’s say lazybg) and put the background-image into a data-attribute (let’s say data-lazybg). So you change this:

<div class="mybackgroundimagediv" style="background-image:url(img/myawesomeimage.jpg);"></div>

into this:

<div class="mybackgroundimagediv lazybg" data-lazybg="http://myawesomewebsite.com/img/myawesomeimage.jpg" style=""></div>

Step 3: Write some javascript to load the background-image lazily:

<script>
let lazyObjectObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                let lazyObject = entry.target;
                if(!(lazyObject.dataset.lazybg == '')){
                    bgsrc = lazyObject.dataset.lazybg;
                    lazyObject.style.backgroundImage="url("+bgsrc+')';
                    lazyObject.classList.remove("lazybg");
                    lazyObject.dataset.lazybg = '';
                    lazyObjectObserver.unobserve(lazyObject);
                }
            }
        });
    },{ rootMargin: "0px 0px 0px 0px" });

document.addEventListener("DOMContentLoaded", function() {
  var lazyObjects = [].slice.call(document.querySelectorAll(".lazybg"));
  lazyObjects.forEach(function(lazyObject) {
        lazyObjectObserver.observe(lazyObject);
  });
});
</script>

Success! Your prepared divs will now load the background-image when they come into the viewport!

Related Posts: