Класс удаляется с ленивой загрузкой JavaScript - PullRequest
Новая
       22

Класс удаляется с ленивой загрузкой JavaScript

0 голосов
/ 14 июня 2019

Я пытаюсь Ленивый загрузить некоторые изображения на сайт.Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно удалить класс, чтобы ленивая загрузка работала, но я все еще хочу, чтобы свойства CSS использовались изображением.Кто-нибудь может помочь? 

// JavaScript Document
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.Images"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("Images");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});
.Images {
  width: 190px;
  height: 190px;
  padding: 10px;
  object-fit: cover;
}
<img class="Images" src="https://i.imgur.com/mf5YDAy.jpg" data-src="https://i.imgur.com/mf5YDAy.jpg" data-srcset="https://i.imgur.com/mf5YDAy.jpg, https://i.imgur.com/mf5YDAy.jpg" />
...