Question

我有一个问题，img src有一个加载时间，同时我在img标签上显示一个灰色背景作为占位符。

如果加载了img src，我想淡入img。是否有可能为img src改变一些动画？

<img
                    ref={ref => this.image = ref}
                    src={`someImgUrl`}
                    onError={() => this.image.setAttribute('src', 'someErrorImgUrl')}
                    style={{ width: '66px', height: '66px', backgroundColor: 'grey' }}
>

thx 4 ur time

Answer 1

您在加载图片时会触发的图像上发生load事件，因此您可以使用它实现该事件

这是一个简单的fiddle

Answer 2

使用React，您可以创建一个图像加载器组件，如：

import React, { Component } from "react";

const _loaded = {};
class ImageLoader extends Component {
  static defaultProps = {
    className: "",
    loadingClassName: "loading",
    loadedClassName: "loaded"
  };

  constructor(props, context) {
    super(props, context);
    this.state = { loaded: _loaded[props.src] };
  }

  onLoad = () => {
    console.log("LOADED");
    _loaded[this.props.src] = true;
    this.setState(() => ({ loaded: true }));
  };

  render() {
    let { className, loadedClassName, loadingClassName, ...props } = this.props;
    className = `${className} ${this.state.loaded
      ? loadedClassName
      : loadingClassName}`;

    return <img {...props} className={className} onLoad={this.onLoad} />;
  }
}

export default ImageLoader;

稍后再使用：

<ImageLoader src={src} />

完整示例：https://codesandbox.io/s/6ykm7o4lzk

animate（fadeIn）img src如果加载了反应#noJQuery

2 个答案: