해결된 질문
작성
·
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
)
}
)
)
뷰 포트에 보이는 이미지 엘리먼트만 이미지를 로드해주고 싶은데 이렇게 코드를 작성해도 괜찮을까요? 더 좋은 방법이 있다면 알고 싶습니다!