지연 로딩 이미지
4187 단어 reactjavascript
첫째, 이미지가 흐려지고 언젠가 이미지가 끝나면 전체 이미지가로드됩니다.
어떻게 된거야????
두 개의 이미지가 저해상도이지만 원본 이미지의 정확한 너비와 높이로 렌더링되고 병렬로 원본 이미지를 전체 해상도로 로드하고 이미지를 로드할 때 저해상도 이미지를 로드합니다. 전체 해상도 이미지로 대체
타다...
하지만 코드에서 이것을 어떻게 달성할 수 있는지 잠시 기다려 보겠습니다.
import { useEffect, useState } from 'react'
const useLazyImage = (src: string): useLazyImageProps => {
const [sourceLoaded, setSourceLoaded] = useState<string | null>(
null,
)
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
const img = new Image()
img.src = src
img.onload = () => {
setLoading(false)
setSourceLoaded(src)
}
return () => {
img.remove()
}
}, [src])
return {
loading,
src: sourceLoaded,
}
}
interface useLazyImageProps {
loading: boolean
src: null | string
}
export default useLazyImage
여기에서 일어나고 있는 많은 일들이 있습니다. 하나씩 살펴보도록 하겠습니다.
useLazyImage
는 전체 해상도 이미지의 주소를 받아들이고 로딩 true/false 및 src를 반환하는 후크입니다.구성 요소를 마운트하는 동안 이미지 주소로 img 요소를 생성하고 이미지 로드가 완료되면 onLoad 이벤트를 통해 로드를 false로 설정하고 노드 마운트 해제 시 img 노드를 제거합니다.
간단하다
댓글로 알려주세요
Reference
이 문제에 관하여(지연 로딩 이미지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/palashgdev/lazy-loading-image-2e17텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)