강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của yunadev
yunadev

câu hỏi đã được viết

Lập trình hàm và ứng dụng JavaScript ES6+

Xử lý đồng thời hình ảnh

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

Đã giải quyết

Viết

·

318

·

Đã chỉnh sửa

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

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

javascript함수형프로그래밍

Câu trả lời 1

1

mduniv님의 프로필 이미지
mduniv
Người chia sẻ kiến thức

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

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

Hình ảnh hồ sơ của yunadev
yunadev

câu hỏi đã được viết

Đặt câu hỏi