React 점진적 이미지 로드기: 흐릿함에서 선명함까지의 고해상도

개요

좋은 사용자 환경을 통해 API에서 데이터를 로드할 때 UI 요소를 볼 수 있습니다.때로는 대형 네트워크의 유효 부하에 대해 이번에는 의미가 클 수도 있다.사용자 인터페이스 요소의 표시와 좋은 사용자 체험을 허용함으로써 사용자는 흰색 페이지를 사용하는 것처럼 낙담하지 않을 것이다.이것은 매우 큰 차이다.
대량의 고해상도 3D 이미지가 필요한 프로젝트에 종사할 때 이런 이미지 탑재 기술은 생명을 구하는 허수아비가 되었다.고해상도 이미지를 로드하는 동안 이미지의 작은 버전을 로드할 수 있습니다.그것은 큰 것이 아니라 흐릿한 그림을 표시하고 불러온 후에 초점을 맞춘다.
이것은 미디어의 이미지를 위한 것입니다. 사용자가 실시간으로 불러오는 이미지를 보고 불러오는 속도를 높일 수 있습니다.

모호한 버전과 뚜렷한 버전.

이미지 주석

개발자들이 자주 소홀히 하는 것은 네트워크 부하 중 가장 무거운 부분 중 하나라도 이미지 크기이다.전 사이즈 이미지에 대해 가능하다면, 나는 가능한 한 어떤 이미지에서도 150k를 넘지 않으려고 한다.대부분의 화면 크기와 대부분의 용례에 대해 1280px 너비는 상한선이어야 합니다.만약 네가 초고화질 이미지를 처리하고 있다면, 너는 반드시 상응하는 조정을 해야 한다.

이 이미지는 처음 불러올 때 초소형 이미지를 받고 비교적 큰 전체 사이즈 이미지로 변환됩니다.내가 이렇게 할 때, 나는 그림의 높이를 약 30px, 크기는 약 500b (네, 이것은 바이트) 로 유지하려고 노력할 것입니다.나도 JPG 압축기의 품질을 10퍼센트 정도 낮출 것이다.너는 색깔과 형상의 대체적인 윤곽만 있으면 된다.아래에서 당신은 고압축 아래의 작은 그림을 볼 수 있습니다.

에는 Cloudinary와 같은 서비스가 있습니다. 전체 사이즈 이미지를 처리하고 작은 사이즈 이미지로 변환하는 URL의 조회 매개 변수를 전달할 수 있습니다.이것은 공급업체에 그림을 불러오기만 하면 된다는 것을 의미합니다.그러나 주의해야 할 것은 당신이 비용을 받기 전에 그들이 당신이 할 수 있는 전환 수량에 대해 제한이 있다는 것이다.

압축된 작은 이미지의 확대 버전입니다.이거 500b예요.

코드

우선, 우리는 기본적인react 구성 요소를 만들 것입니다.다음과 같은 도구가 포함됩니다.

preview: 사진 이터레이션

image: 사진

의 전 사이즈 버전

alt:

에 접근할 수 있도록 기억하세요
다음은 선택할 수 있지만 다시 사용하기 쉽습니다.imageStyleClass과 divStyleClass은 Tailwind에서 온 스타일 클래스와 같은 스타일 클래스를 주입할 수 있습니다.css나 다른 스타일시트는 각각의 이미지에 대해 다른 크기를 사용합니다.bgColor은 네트워크 부하가 오래 걸리면 사진의 공간을 차지하는 것을 확보할 수 있습니다.기본값을 투명하게 설정했습니다.

imageStyleClass: 이미지의 클래스 이름

divStyleClass:container div

의 클래스 이름

bgColor: 첫 번째 적재 시

우리는 div와 그림을 주시하고 있다.true으로 설정된 로드 상태와 현재 이미지 상태도 추가됩니다.currentImage은 처음에 미리 보기에 사용됩니다.그러나 전체 크기 이미지가 로드됨에 따라 상태를 변경합니다.이미지 소스는 이미지를 로드할 때 업데이트되기 때문에 currentImage으로 설정됩니다.
div는 이미지 영역에서 넘쳐나는 필터가 모호한지 확인하는 데 사용됩니다.잠시 후 useEffect을 사용하고 스타일링 아이템은 각자의 태그에 추가됩니다.

import React, { useEffect, useState } from 'react';
const [currentImage, setCurrentImage] = useState(preview);
const [loading, setLoading] = useState(true);

const BlurryLoadingImage = ({
  preview,
  image,
  alt,
  imageStyleClass,
  divStyleClass,
  bgColor = 'transparent',
}) => {
  return (
    <div className={divStyleClass}>
      <img src={currentImage} alt={alt} className={imageStyleClass} />
    </div>
  );
};

export default BlurryLoadingImage;

이제 마술이 어디서 일어났는지 봅시다.fetchImage에서 큰 그림 파일을 불러올 때까지 기다립니다.완료되면 currentImage을 새 이미지 소스로 설정합니다.fetchImage이 image에서 호출될 때 전체 사이즈 useEffect원을 매개 변수로 사용합니다.

const fetchImage = (src) => {
  const loadingImage = new Image();
  loadingImage.src = src;
  loadingImage.onload = () => {
    setCurrentImage(loadingImage.src);
    setLoading(false);
  };
};

useEffect(() => {
  fetchImage(image);
}, []);

현재 스타일링이 없기 때문에, 당신은 아주 작은 이미지에서 전체 사이즈의 이미지로 변할 것이다.그림이 모호함에서 고해상도로 변할 수 있도록 그림에 다음과 같은 내용을 추가해야 합니다.이것은 초기 이미지를 흐리게 한 다음 이미지 불러오기가 끝난 후에 변환합니다.필요에 따라 이 시간과 모호한 값을 조정할 수 있습니다.
둘 사이의 과도는 멋진 효과를 내고 사진이 초점을 맞추는 것처럼 더욱 뚜렷해진다.이 기간을 다시 조정하여 프로젝트에 어떤 내용이 유효한지 알 수 있습니다.

<img
  style={{
    filter: `${loading ? 'blur(20px)' : ''}`,
    transition: '1s filter linear',
    width: '100%',
    background: bgColor,
  }}
  src={currentImage}
  alt={alt}
  className={imageStyleClass}
/>

너비를 100%로 설정하여 상위 컨테이너를 채우고 작은 이미지가 상위 컨테이너와 동일한 공간을 차지하도록 합니다.크기 버전 간에 통일된 이미지 크기를 유지하려면 divStyleClass의 부모 div에 폭을 설정해야 합니다.마지막으로 권장하는 것은 divClassStyle CSS를 overflow: hidden으로 설정하는 것입니다. 왜냐하면 이미지의 희미한 픽셀이 넘치기 때문입니다.
그렇습니다.이제 이미지를 사용해야 하는 모든 곳에서 이 이미지를 사용할 수 있습니다.그것은 높은 중용성을 가지고 있어 불러오는 시간을 줄일 수 있습니다.당신의 초기 이미지는 150k가 아니라 500b입니다. 이것은 당신의 사용자 체험을 더욱 좋아지게 할 것입니다.

최종 반응 성분

import React, { useEffect, useState } from 'react';

const BlurryLoadingImage = ({
  preview,
  image,
  alt,
  imageStyleClass,
  divStyleClass,
  bgColor = 'transparent',
}) => {
  const [currentImage, setCurrentImage] = useState(preview);
  const [loading, setLoading] = useState(true);

  const fetchImage = (src) => {
    const loadingImage = new Image();
    loadingImage.src = src;
    loadingImage.onload = () => {
      setCurrentImage(loadingImage.src);
      setLoading(false);
    };
  };

  useEffect(() => {
    fetchImage(image);
  }, []);

  return (
    <div className={divStyleClass} style={{ overflow: 'hidden' }}>
      <img
        style={{
          filter: `${loading ? 'blur(20px)' : ''}`,
          transition: '1s filter linear',
          width: '100%',
          background: bgColor,
        }}
        src={currentImage}
        alt={alt}
        className={imageStyleClass}
      />
    </div>
  );
};

export default BlurryLoadingImage;