主页 / 问题 / 1047943
Accepted
Timofey Melentev
Asked:2020-11-19 18:00:12 +0000 UTC2020-11-19 18:00:12 +0000 UTC

在加载所有图像之前不要显示空白页

  • 772

我有一个图像库，其中所有图像都根据此模板非常粗略地呈现

import image1 from './images/image1';
    <...>    
    render(){
        return(
        
             <img src={image1} alt="" />
        );
    }

也就是说，图像不是从服务器加载的，而是通过导入从文件夹中加载的。问题是当我去这个画廊时，起初我看到的只是一个没有这些图片的布局，然后它们加载了两秒钟，然后一切都很好。我需要在它们加载时，不显示页面，但可以看到某种微调器。我看到了他们在 fetch 发生时放置它的示例，但我没有。可能吗？或者至少以某种方式制作动画，使图像随着透明度的变化逐渐出现？

一般是如何实现的？

页面仍在加载时看到的内容

javascript

1 个回答

  1. Best Answer

    一般而言，您可以在标签上使用onLoad&onError事件侦听<img />器来处理下载结束。您可以在下面看到像这样工作的组件的示例代码

    import React from "react";

class ImageWithStatusText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: "loading" };
  }

  handleImageLoaded() {
    this.setState({ imageStatus: "loaded" });
  }

  handleImageErrored() {
    this.setState({ imageStatus: "failed to load" });
  }

  render() {
    return (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
        />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;
    • 1

相关问题