React渐进式的图片加载组件

最新推荐文章于 2024-05-11 16:30:18 发布

Markov Zheng

最新推荐文章于 2024-05-11 16:30:18 发布

阅读量477

点赞数

分类专栏：网络学习日志 React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/marko_zheng/article/details/125620074

版权

React渐进式的图片加载插件（Tsx版）

index.tsx

import React, { useState, useEffect } from "react";
import './index.less'
const ProgressiveImg = ({ placeholderSrc, src, ...props }) => {
  const [imgSrc, setImgSrc] = useState(placeholderSrc || src);
  const customClass:any = placeholderSrc && imgSrc === placeholderSrc ? "loading" : "loaded";
  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setImgSrc(src);
    };
  }, [src]);

  return (
    <img
      {...{ src: imgSrc, ...props }}
      alt={props.alt || ""}
      className={`image ${customClass} ${props?.className ?? ''}`}
    />
  );
};
export default ProgressiveImg;