intersection observer - OhMinsSup/tip-review GitHub Wiki

[https://heropy.blog/2019/10/27/intersection-observer/]

new Vue({
  el: '#app',
  data () {
    return {
      photos: [],
      length: 4,
      showScrollObserver: true
    }
  },
  created () {
    this.fetchPhotos(1, this.length)
      .then(() => {
        this.initIntersectionObserver()
      })
    // For next photo
    this.increasePhotoLength()
  },
  methods: {
    /**
     * @summary 사진을 가져옵니다.
     * @param {number} start - 가져올 사진의 시작 포인트
     * @param {number} limit - 가져올 사진의 개수
     * @return {Promise} - 비동기 실행을 위한 Promise 객체
     */
    fetchPhotos (start = 1, limit = 1) {
      return new Promise(resolve => {
        const photosToFetch = []
        for (let i = start; i < start + limit; i += 1) {
          photosToFetch.push(
            axios(`https://jsonplaceholder.typicode.com/photos/${i}`)
          )
        }
        
        Promise.all(photosToFetch)
          .then(photos => {
            return photos.map(photo => {
              return {
                ...photo.data,
                imageLoaded: false
              }
            })
          })
          .then(photos => {
            this.photos.push(...photos)
            this.photos.forEach(photo => {
              // 사진 로드를 대기
              const image = new Image()
              image.src = photo.url
              image.onload = () => {
                photo.imageLoaded = true
              }
            })
            resolve(true)
          })
      })
    },
    /**
     * @summary Intersection Observer를 초기화합니다.
     */
    initIntersectionObserver () {
      const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          // 요소(#scroll-observer)의 가시성이 확보되면..
          if (entry.isIntersecting) {
            this.fetchPhotos(this.length)
            // For next photo
            this.increasePhotoLength()
          }
        })
      }, {
        // 'Codepen'와 'JSFiddle'에서는 옵션이 제대로 동작하지 않는군요.
        // 옵션에 대한 테스트는 'JSBin'이나 로컬에서 진행하시면 됩니다.
        
        // 로딩 애니메이션이 보이지 않게 가져오기를 수행할 수 있도록..
        // rootMargin: '0px 0px 400px 0px'
      })
      
      io.observe(this.$refs.scrollObserver)
    },
    /**
     * @summary 가져올 사진의 시작 포인트를 증가시킵니다.
     */
    increasePhotoLength () {
      this.length += 1
      console.log(this.length)
    }
  }
})