뷰포트에 보이는 엘리먼트만 이미지 로드하고 싶을 때

_.go(
  Images.fetch(),
  Images.tepl,
  $.el,
  $.append($.qs('body')),
  _.tap(
    $.findAll('img'),
    L.map(img => {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            new Promise((resolve, reject) => {
              img.onload = () => resolve(img)
              img.src = img.getAttribute('lazy-src')
              img.onerror = () => reject()
            }).catch(_ => {
              img.src = 'https://images.chosun.com/resizer/u9nJRxs0BbtjygJ4HzKukecXnOk=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/UVBJZL3RXAB36BDSHVM3MW2WNY.jpg'
            })
            $.addClass('fade-in', img)
          }
        })
      })
      return () => observer.observe(img)
    }),
    C.takeAllWithLimit(8),
    _.each(_ => _)
  ),
  $.findAll('.remove'),
  $.on('click', async ({currentTarget}) => {
      await Ui.confirm('정말 삭제하시겠습니까?') &&
        _.go(
          currentTarget,
          $.closest('.image'),
          $.remove
        )
    }
  )
)

뷰 포트에 보이는 이미지 엘리먼트만 이미지를 로드해주고 싶은데 이렇게 코드를 작성해도 괜찮을까요? 더 좋은 방법이 있다면 알고 싶습니다!