react cool img
v1.2.12
이것은 가벼운 반응 <Img /> 구성 요소로, 이미지 UX (사용자 경험) 및 전문가로서의 성능 최적화를 처리하는 데 도움이됩니까?
독창적 인 개발 경험을 끊지 않고 많은 멋진 기능으로 표준 img 태그를 제공합니다. 이상적으로는 React.js의 img 태그 대체품 일 수 있습니다.
⚡️ 라이브 데모 : https://react-cool-img.netlify.app
hithub에 또는 그것에 대해 트윗하십시오.
다양한 이미지 로딩 상태를 만족시키기위한 자리 표시 자 (예 : 이미지로드> 실제 이미지> 오류 이미지).
교차로 관찰자를 사용하여 성능적이고 효율적인 방법으로 스마트 게으른 하중.
내장 된 자동 평가자 메커니즘. 사용자는 중요한 정보를 놓치지 않습니다.
구성 요소에서 현재 이미지 다운로드를 중단하면 잠재적으로 저장하는 대역폭 및 브라우저 리소스를 저장합니다.
서버 측 렌더링 / JavaScript가 비활성화 / SEO를 지원합니다.
TypeScript 유형 정의를 지원합니다.
작은 크기 (~ 2kb gzipped). react 및 react-dom 제외하고 외부 의존성이 없습니다.
사용하기 쉽습니다.
켈 대부분의 현대식 브라우저는 교차로 관찰자를 기본적으로 지원합니다. 전체 브라우저 지원을 위해 PolyFill을 추가 할 수도 있습니다.
react-cool-img 반응 후크를 기반으로합니다. react v16.8+ 필요합니다.
이 패키지는 NPM을 통해 배포됩니다.
$ yarn 추가 반응 -Cool-IMG# 또는 $ NPM 설치-사브 react-cool-img
최적화 로딩 목적으로 구성 요소의 기본 소품이 미세 조정되었습니다. 다음 예로 시작합시다.
"React-Cool-Img"에서 IMG 가져 오기; // "./images/loading.gif"에서"./images/error.svg" ;const app = (import errorimage from ". ) => (
<imgplaceholder = {loadingImage} src = "https : // the-image-url"error = {errorimage} alt = "반응 cool img"
/>); 이미지 자리 표시자를 원하지 않습니까? 걱정할 필요가 없습니다. 인라인 스타일이나 CSS를 사용할 수 있습니다. 구성 요소는 정상 img 태그의 개발 경험과 완전히 호환됩니다.
"React-Cool-Img"에서 IMG 가져 오기; const app = () => (
<imgstyle = {{backgroundColor : "Grey", 너비 : "480", 높이 : "320"}} src = "https : // the-Image-url"alt = "React Cool IMG"
/>); 표준 img 태그 및 다음 소품과 유사한 이미지 구성 요소.
| 소품 | 유형 | 기본 | 설명 |
|---|---|---|---|
src | 끈 | 이미지 소스. required .지원 형식 | |
srcSet | 끈 | 반응 형 이미지의 이미지 소스. src Prop에만 해당됩니다.참조 기사 | |
sizes | 끈 | 반응 형 이미지의 이미지 크기. src Prop에만 해당됩니다.참조 기사 | |
width | 끈 | px에서 이미지의 너비. | |
height | 끈 | px에서 이미지의 높이. | |
placeholder | 끈 | 자리 표시 자 이미지 소스. 지원 형식 | |
error | 끈 | 오류 이미지 소스. 자리 표시 자 이미지를 대체합니다. 지원 형식 | |
alt | 끈 | 이미지 섹션의 대체 텍스트. | |
decode | 부울 | true | img.decode ()를 사용하여 렌더링하기 전에 이미지를 사전 결정하십시오. 큰 이미지를 디코딩하여 메인 스레드가 차단되는 것을 방지하는 데 유용합니다. |
lazy | 부울 | true | 게으른 하중을 켜거나 끄십시오. 교차 관찰자 사용 |
cache | 부울 | true | 게으른 하중 거동을 중단하기 위해 가능한 경우 캐시 된 이미지를 즉시로드하십시오. 참조 기사 |
debounce | 숫자 | 300 | 로드를 시작하기 전에 이미지가 뷰포트에 있어야하는 밀리 초로 기다려야 할 금액. 이렇게하면 이미지가 다운로드되는 것을 방지 할 수 있습니다. |
observerOptions | 물체 | { root: window, rootMargin: '50px', threshold: 0.01 } | 관찰 조항 섹션을 참조하십시오. |
retry | 물체 | { count: 3, delay: 2, acc: '*' } | 레트리 섹션을 참조하십시오. |
... | 더 많은 소품과 이벤트를 찾으십시오. |
모든 속성은 optional 입니다.
root: Element | null 대상의 가시성을 확인하기 위해 뷰포트로 사용되는 요소. 목표의 조상이어야합니다. 지정되지 않았거나 null 이면 브라우저 뷰포트의 기본값.
rootMargin: string - 루트 주위의 여백. CSS 마진 속성과 유사한 값 (예 : "10px 20px 30px 40px" (상단, 오른쪽, 하단, 왼쪽)를 가질 수 있습니다. 값은 백분율 일 수 있습니다. 이 값 세트는 교차로를 계산하기 전에 루트 요소의 경계 상자의 각 측면을 성장 시키거나 축소하는 역할을합니다.
threshold: number - 0과 1 사이의 단일 숫자는 관찰자의 콜백을 실행 해야하는 대상의 가시성의 비율을 나타냅니다. 0의 값은 하나의 픽셀조차 보이면 콜백이 실행됩니다. 1은 모든 픽셀이 보일 때까지 임계 값이 전달되지 않는다는 것을 의미합니다.
모든 속성은 optional 입니다.
count: number - 다시 시도 할 횟수를 지정합니다. 0으로 설정하면 자동 도리를 비활성화합니다.
delay: number - 몇 초 만에 회수 간의 지연을 지정합니다.
acc: string | false 각 재 시도로 지연이 어떻게 축적되어야하는지 지정합니다. 다음 값을 수락합니다.
'*' (default) - 주어진 delay 값에 의해 각 후속 재 시도 후 지연 지연, 예를 들어 delay: 2 2 초, 4 초, 8 초 등의 재 시도가 실행되는 것을 의미합니다.
'+' - 주어진 delay 값에 의해 각각의 재시도 후 지연, 예를 들어 delay: 2 는 2 초, 4 초, 6 초 등을 의미합니다.
false -Retries 사이의 지연을 일정하게 유지하십시오. 예를 들어 delay: 2 2 초마다 재 시도가 실행됩니다.
교차로 관찰자 API를 통한 게으른 이미지 로딩이 좋습니다. 그러나 사용자가 이미지를보고 싶을 때만 이미지를 다운로드하는 것이 더 커질 수 있습니까? 아니면 캐시 된 이미지에 대한 게으른로드를 우회? 대답은 예이며 이러한 기능은 이미 debounce 및 cache 소품에 의해 react-cool-img 에 내장되어 있습니다.
debounce Prop에 의해, 이미지가 설정 시간 동안 뷰포트에있는 동안 이미지가 다운로드 될 때까지 기다릴 수 있습니다. 사용자가 실수로 스크롤 할 수있는 긴 이미지 목록이있는 경우. 현재 이미지를로드하면 대역폭과 처리 시간의 불필요한 낭비가 발생할 수 있습니다.
"react-cool-img"에서 IMG 가져 오기; "./images/default.svg" ;const app = () =>에서 import defaultimg에서 가져옵니다.
<imgplaceholder = {defaultimg} src = "https : // the-image-url"debounce = {1000} // 기본값은 300 (ms) alt = "React Cool IMG"입니다.
/>); cache 소품에 의해 이미 캐시 된 이미지는 사용자가 다음에 앱을 방문 할 때까지 게으른로드를 중단합니다. 캐시되지 않은 나머지 이미지에 대해 게으른 하중이 설정됩니다. 캐시 된 이미지를 즉시로드하기위한 추가 작업이 많지 않으며 UI를보다 직관적으로 보이게하기위한 쉬운 승리이기 때문에 UX에 도움이됩니다.
"react-cool-img"에서 IMG 가져 오기; "./images/default.svg" ;const app = () =>에서 import defaultimg에서 가져옵니다.
<imgplaceholder = {defaultimg} src = "https : // the-image-url"cache // demoalt = "rect cool img"
/>); 서버 측 렌더링으로 게으른 이미지로드를 할 때 두 가지 문제가 있습니다. 하나는 JavaScript 가용성입니다. 다른 하나는 SEO입니다. 다행히도 <noscript> 태그를 사용하여 이러한 문제를 해결할 수 있습니다. JavaScript가 비활성화 된 경우 실제 이미지를 폴백으로 렌더링합니다. 따라서 사용자는 자리 표시 자와 붙어있는 이미지가 표시되지 않습니다. 또한 <noscript> 태그는 JavaScript 코드를 완전히 이해할 수 없더라도 이미지가 검색 엔진 봇으로 인덱싱되도록합니다. 마법이 어떻게 일어나는지 살펴보십시오.
// src/img.tsxConst img = () => {
// ...
return (<> <imgclass = "image"src = "https : // placeholder-image"alt = "magic havic have"/<noscript> <img class = "image"src = "https : // -actual-Image "alt ="마법이 여기에서 시작됩니다 ... "/> </noscript> </>
);}; 교차로 관찰자는 브라우저간에 잘 지원되지만 보편적이지는 않습니다. 지원하지 않는 브라우저가 필요합니다. Polyfills는 응용 프로그램 수준에서 의식적으로해야 할 일입니다. 따라서 react-cool-img 에는 포함되지 않습니다.
W3C의 Polyfill을 사용할 수 있습니다.
$ yarn 교차점-오브 서버# 또는 $ npm 설치-save Intersection-Abserver
그런 다음 앱의 진입 점에서 가져 오기 :
"Intersection-Observer"가져 오기;
또는 폴리 필이 필요할 때만 파일 만로드하기 위해 동적 가져 오기를 사용하십시오.
(async () => {
if (!polyfill.io는 필요할 때 Polyfill을 추가하는 다른 방법입니다.
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
웰리 ? |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
