加载器直到图像加载做出反应

发布于 2025-01-11 06:29:58 字数 168 浏览 0 评论 0原文

我有一个任务 - 制作预加载器，直到加载所有图像。所以我们使用 React，我是这个框架的新手，我需要帮助，因为我无法做出正确的逻辑步骤。我们有 App.js 并且该文件没有任何 img 仅返回组件，那么如何从它们已加载的图像中获取信息？我了解 onLoad，但不明白如何从组件中的 onLoad 获取这个 bool 。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怎樣才叫好 2025-01-18 06:29:58

有多种方法可以做到这一点，但最简单的方法是显示隐藏的最终图像，然后在加载后将其翻转为可见。

   class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

There are several ways to do this, but the simplest is to display the final image hidden, and then flip it to visible once it loads.

   class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

回复收藏 0 原文

你穿错了嫁妆 2025-01-18 06:29:58

我从来没有处理过这个问题，但有一种方法（可能有点hacky）。

您基本上可以使用 React 中内置的 useEffect 钩子。这用在功能组件中。它本质上是在页面安装后运行命令。您可以尝试的是，首先将布尔状态（例如：isLoading）设置为true，然后运行命令将此状态设置为false > 在 useEffect 挂钩中。

例子

I've never had to deal with this but there is a way (which might be a bit hacky).

You can essentially use a useEffect hook that is built into React. This is used in the functional components. It essentially runs commands after the page has mounted. What you can try, is initially set a boolean state (e.g.: isLoading) to be true and then run a command to set this state to false in the useEffect hook.

Example ????

function MyComponent(){
  // Create an instance of react's useState hook
  const [isLoading, setIsLoading] = useState(true);

  // This will run after the page has mounted
  React.useEffect(() => {
    setIsLoading(false);
  }, [setIsLoading]);

  return{
    //... 
  }
}

回复收藏 0 原文

~没有更多了~