How to request data only if the component is visible on the screen?

Question

Vue.js

Page in the form of a tape of photos and likes to them. There are 2 photos on the screen, and there are more than 20 on the page. Information for each like is loaded separately. Perhaps there are ready-made components that monitor whether the component is visible on the screen. I want to request data from the server only when the user scrolls the page to each photo.

Answer 1

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);
},