Наблюдатель на пересечении «выгружает» изображения после зацикливания на карусели (Siema) - PullRequest
Новая
       29

Наблюдатель на пересечении «выгружает» изображения после зацикливания на карусели (Siema)

0 голосов
/ 05 февраля 2020

У меня есть скрипка , чтобы показать мою проблему.

Я сделал наблюдатель пересечения для отложенной загрузки изображений, код: 

const images = document.querySelectorAll("[data-src]");

function preloadImage(img){
    const src = img.getAttribute("data-src");
    if (!src) { return; }
    img.src= src;
}

const imgOptions = {
    threshold: 0,
    rootMargin: "0px 0px 300px 0px"
};

const imgObserver = new IntersectionObserver( (entries, imgObserver) => {
    entries.forEach(entry => {
        if(!entry.isIntersecting){
            return;
        } else {
            preloadImage(entry.target);
            imgObserver.unobserve(entry.target);
        }
    })
}, imgOptions);

images.forEach( image => {
    imgObserver.observe(image);
});

Проблема возникает, когда я l oop через карусель Siema, последнее и первое изображения "выгружаются" Это означает, что src возвращается к data-src, несмотря на то, что ему сообщается unobserve после пересечения.

Чтобы увидеть проблему, просто нажмите «prev» в скрипке. Первое изображение исчезнет, ​​но оно уже загружено.

Почему это происходит, что я делаю не так?

РЕДАКТИРОВАТЬ: Исправлена ​​работа скрипки , спасибо @ ohladkov

1 Ответ

0 голосов
/ 05 февраля 2020

Это происходит из-за этого значения: loop: 1. При загрузке страницы в const images = document.querySelectorAll ("[data-src]") содержится только 6 изображений, а при инициализации ползунка - 10 изображений. Вам нужно получить изображения и вызвать наблюдателя при инициализации слайдера. Siema имеет обратный вызов onInit. Примерно так: 

onInit() {
  const el = document.querySelector(this.config.selector); // get siema container
  const images = el.querySelectorAll("[data-src]"); // get all siema images

  images.forEach( image => {
    imgObserver.observe(image);
  });
},

Надеюсь, это вам поможет!

...