Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

i'm trying to improve my page speed, in order to do that i have used many lazy loading plugin, they work for normal images but not for background images. i need to lazy load background images to improve my page speed please help!!!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

i'm trying to improve my page speed, in order to do that i have used many lazy loading plugin, they work for normal images but not for background images. i need to lazy load background images to improve my page speed please help!!!

• plugins
• images

Share Improve this question edited Sep 25, 2019 at 16:45 fuxia♦ 107k3939 gold badges255255 silver badges459459 bronze badges asked Sep 17, 2019 at 5:27 Abhishek KalotraAbhishek Kalotra 1511 silver badge55 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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/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/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!