Как запросить данные только если компонент виден на экране?

Question

[grabbee]

Страница в виде ленты фотографий и лайки к ним. На экране видно 2 фотографии, а на странице их больше 20. Информация по каждому лайку загружается отдельно. Возможно есть готовые компоненты которые следят за тем, виден ли компонент на экране. Хочу запрашивать данные с сервера только когда пользователь проскроллит страницу до каждой фотки.

Comments

[WapSter]

Используй intersectionObserver

[grabbee]

https://www.npmjs.com/package/vue-observe-visibility - очень подошло

Answer 1

[0xD34F]

mounted() {
  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
      stopObservation();
      // здесь запрашивайте свои данные
    }
  }, {
    threshold: 1,
  });
  observer.observe(this.$el);

  const stopObservation = () => observer.disconnect();
  this.$on('hook:beforeDestroy', stopObservation);
},

Comments

[grabbee]

https://www.npmjs.com/package/vue-observe-visibility - очень подошло