Обратный вызов IntersectionObserver запускается сразу при загрузке страницы - PullRequest
Новая
       16

Обратный вызов IntersectionObserver запускается сразу при загрузке страницы

0 голосов
/ 08 ноября 2018

Я очень плохо знаком с API IntersectionObserver , и я экспериментировал с этим кодом: 

let target = document.querySelector('.lazy-load');

let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}

let observer = new IntersectionObserver(callback, options);

observer.observe(target);

function callback() {
    console.log('observer triggered.');
}

Кажется, это работает как надо, и callback() вызывается всякий раз, когда элемент .lazy-load входит в область просмотра, но callback() также запускается один раз при начальной загрузке страницы, что вызывает `console.log ('срабатывает наблюдатель . ');

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

Редактировать: изменение кода ниже по-прежнему вызывает обратный вызов при загрузке страницы. 

let target = document.querySelector('.lazy-load');

let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}

let callback = function(entries, observer) {
    entries.forEach(entry => {

        console.log('observer triggered.');

    });
};

let observer = new IntersectionObserver(callback, options);

observer.observe(target);

1 Ответ

0 голосов
/ 20 ноября 2018

Это поведение по умолчанию. Когда вы создаете экземпляр IntersectionObserver, будет запущен callback.

Рекомендуется принять меры против этого случая. 

entries.forEach(entry => {
  if (entry.intersectionRatio > 0) {
    entry.target.classList.add('in-viewport');
  } else {
    entry.target.classList.remove('in-viewport');
  }
});

Также я нашел эту статью, а также документы очень полезными, особенно о свойствах intersectionRatio или isIntersecting в IntersectionObserverEntry.

· https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/

· https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

· https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry

...