Как правильно подключить yall к css background?

Question

[Just Anonim]

Всем привет пытаюсь подключить YALL (Yet Another Lazy Loader)
Но почему то не работает..

Вот у меня есть блок с фоновой картинкой:

<div class="registration__block_bg lazy-bg">

Вот что я написал в CSS, в принципе все как по инструкции, но не работает..(

.registration__block_bg{
  background-size: cover;
  min-height: 100vh;
  min-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
  background: rgba(0, 93, 146, 0.686);
}
.registration__block_bg.lazy-bg-loaded{
  background: url("../img/10.webp") no-repeat center center fixed;
}

Подключил скрипт вот так:

<script async type="text/javascript" src="../js/lazy.mjs"></script>

Кто то подскажет что я сделал не так? :(

Comments

[Ольга]

вы здесь может быть опечатались в вопросе? потому что если подключили скрипт так, то понятно что он не работает
и кроме собственно подключения скрипта, его почти наверняка надо инициализировать

Answer 1

[Just Anonim]

Все решил этим скриптом:

document.addEventListener("DOMContentLoaded", function () {
      var lazyloadImages;

      if ("IntersectionObserver" in window) {
        lazyloadImages = document.querySelectorAll(".lazy");
        var imageObserver = new IntersectionObserver(function (entries, observer) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              var image = entry.target;
              image.classList.remove("lazy");
              imageObserver.unobserve(image);
            }
          });
        });

        lazyloadImages.forEach(function (image) {
          imageObserver.observe(image);
        });
      } else {
        var lazyloadThrottleTimeout;
        lazyloadImages = document.querySelectorAll(".lazy");

        function lazyload() {
          if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }

          lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function (img) {
              if (img.offsetTop < (window.innerHeight + scrollTop)) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
            });
            if (lazyloadImages.length == 0) {
              document.removeEventListener("scroll", lazyload);
              window.removeEventListener("resize", lazyload);
              window.removeEventListener("orientationChange", lazyload);
            }
          }, 20);
        }

        document.addEventListener("scroll", lazyload);
        window.addEventListener("resize", lazyload);
        window.addEventListener("orientationChange", lazyload);
      }
    })