lazy-load-bg.js

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-bg"));

  if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("bg-visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

Hi Chris,

I was trying this out using Code Snippets plugin and it reported an error on line 2:

The code snippet you are trying to save produced a fatal error on line 2:

syntax error, unexpected 'var' (T_VAR)

I'm using Elementor and lazyloading background images is the last thing I need to sort out.

If you got the enqueue line of code from the article on my website, you need to watch out with the quote symbols ( " and ' ) when you copy and paste. Just delete and type those characters in again. Something about the way the code renders on the site makes the encoding of those characters incorrect.

Hope this helps.