Question

看看下面的代码，我也为它创建了一支笔：https://codepen.io/segmentationfaulter/pen/YEEaxK

问题是，当我点击change image按钮时，旧图像会在那里停留一段时间，直到加载新图像。我想要的是，旧图像会立即失效，并为新图像显示空白区域。我怎样才能做到这一点？如果您无法发现问题，请尝试在私有模式下打开它，以便缓存不会影响它。

＆＃13;

const images = [
  'http://via.placeholder.com/550x550',
  'http://via.placeholder.com/750x750'
]

class MyImage extends React.Component {
  constructor() {
    super()
    this.state = {
      currentImageIndex: 0
    }
  }
  changeImage() {
    this.setState((prevState) => {
      if (prevState.currentImageIndex) {
        return {
          currentImageIndex: 0
        }
      } else {
        return {
          currentImageIndex: 1
        }
      }
    })
  }
  render() {
    return ( <
      div >
      <
      img src = {
        this.props.images[this.state.currentImageIndex]
      }
      /> <
      button onClick = {
        this.changeImage.bind(this)
      } >
      change image <
      /button> <
      /div>
    )
  }
}

ReactDOM.render( < MyImage images = {
      images
    }
    />, document.getElementById('root'))

＆＃13;

img {
  display: block;
}

button {
  margin-top: 15px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
  <div>

＆＃13;

Answer 1

每次切换到另一个图像时，尝试为img元素分配一个随机key道具。这种力量反应重建元素。

constructor () {
  super()
  this.state = {
    currentImageIndex: 0,
    imgKey: Math.random()
  }
}
changeImage () {
   this.setState((prevState) => {
     if (prevState.currentImageIndex) {
       return { currentImageIndex: 0, imgKey: Math.random() }
     } else {
       return { currentImageIndex: 1, imgKey: Math.random() }
     }
   })
 }

render () {
    return (
      <div>
        <img key={this.state.imgKey} src={this.props.images[this.state.currentImageIndex]} />
        <button onClick={this.changeImage.bind(this)}>
          change image
        </button>
      </div>
    ) 
  }
}

Answer 2

例如，您可以使用来自onLoad的{{1}}道具来切换img状态，以便您可以渲染占位符。

围绕它的策略是：

loading

显示占位符并隐藏图像
在加载图片时隐藏加载。

PS：我添加了超时，因此您可以看到占位符正在运行中。

true

const images = [
  'http://via.placeholder.com/550x550',
  'http://via.placeholder.com/750x750'
]

class Images extends React.Component {
  constructor() {
    super()

    this.state = {
      currentImageIndex: 0,
      loading: true,
    }
  }

  handleLoad() {
    setTimeout(() => {
      this.setState({ loading: false })
    }, 1000)
  }
  
  changeImage() {
    this.setState((prevState) => {
      if (prevState.currentImageIndex) {
        return {
          currentImageIndex: 0
        }
      }
      return {
        currentImageIndex: 1
      }
    })
  }

  render() {
    const { loading, currentImageIndex } = this.state
    
    return (
      <div>
        {loading && <div>placeholder comes here</div>}
        <img
          onLoad={this.handleLoad.bind(this)}
          src={images[currentImageIndex]}
          style={{ display: loading ? 'none' : 'block' }}
        />
        <button onClick={this.changeImage.bind(this)}>
          change image
        </button>
      </div>
    )
  }
}

ReactDOM.render(
  <Images />,
  document.getElementById('root')
)

Answer 3

可能的方式可能是：

放空图片
获取图像，然后从响应中替换空图像

在React中启动新图像请求时，如何使旧图像无效？

3 个答案: