React渐进式的图片加载组件

Markov Zheng

于 2022-07-05 15:01:09 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/125620074

这篇博客介绍了如何在React项目中实现一个渐进式的图片加载组件，使用Tsx编写，包括`index.tsx`和`index.less`两个部分。文章详细讲解了组件的使用方法，帮助开发者优化前端性能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

index.less

.loading {
  filter: blur(10px);
  clip-path: inset(0);
}
.loaded {
  filter: blur(0);
  transition: filter 0.5

最低0.47元/天解锁文章

200万优质内容无限畅学