인프런 커뮤니티 질문&답변

요시님의 프로필 이미지
요시

작성한 질문수

함수형 프로그래밍과 JavaScript ES6+ 응용편

이미지 동시성 다루기

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

해결된 질문

작성

·

223

·

수정됨

1

_.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
        )
    }
  )
)

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

답변 1

1

유인동님의 프로필 이미지
유인동
지식공유자

이 부분은 제가 정확히 알지는 못하겠습니다 :)

테스트 해보신 결과 잘 되셨다면 맞을거라 생각해요 :)

요시님의 프로필 이미지
요시

작성한 질문수

질문하기