Использование Intersection Observer для отложенной загрузки клонированных элементов - PullRequest
Новая
       16

Использование Intersection Observer для отложенной загрузки клонированных элементов

0 голосов
/ 18 октября 2018

У меня есть измененная карусель Bootstrap 4, которая состоит из нескольких элементов и прокручивается по одному с помощью этого JavaScript: 

$('.carousel[data-type="multi"] .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
  next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
  next = next.next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}
});

Создается клон каждого элемента карусели с несколькими столбцами карусели, например: 

<div class="carousel-item active">
  <div class="carousel-col">
    <img src="" class="lazy" /> <!-- This image loads -->
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
</div>

<div class="carousel-item">
  <div class="carousel-col">
    <img src="" class="lazy" /> <!-- This image loads -->
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
  <div class="carousel-col">
    <img src="" class="lazy" />
  </div>
</div>

Я пытаюсь реализовать отложенную загрузку с помощью Intersection Observer API, однако внутри карусели она работает только с изображением в первой карусельной колонке в каждой карусели.вещь.Я предполагаю, что это связано с клонированием, но я не уверен, как исправить конфликт.API не видит, что клонированные изображения существуют.

Кто-нибудь знает, как мне исправить это?

Вот код JavaScript, который я использую для отложенной загрузки: 

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.src = image.dataset.src;
          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);
  }
});
...