使用onLoad方法在React中加载图像？

Question

我的目标是让我的图库图片在加载时呈现 在线查看，我了解了onLoad方法 这是我试图利用的，这个想法是preloader.gif会在图像加载之前呈现，只需用加载的图像替换图像src。

就像现在（下图）一样，如果我没有使用onLoad方法，图像看起来像往常一样加载，所以有一个时刻没有图像呈现在所有在图像加载之前。

我到底做错了什么？

我已经删除了代码，使问题更容易阅读。

import React from 'react';
import ReactDOM from 'react-dom';

import preloaderImage from '../../../img/site/preloader.gif';

class WorksPage extends React.Component {

  constructor(){
    super();
  }

  imageLoadHandler(image,e) {
    e.target.src = image;
  }


  render() {

    const listWork = this.props.array.map((item,index)=> {
      return(
        <li key={item.id}>
          <div>
            <img src={preloaderImage} onLoad={this.imageLoadHandler.bind(this,item.image)}/>
          </div>
        </li>
      )
    });

    return(
      <li>
        <div>
          <ul>
            {listWork}
          </ul>  
        </div>  
      </li>
    )
  }
}

module.exports = WorksPage;

Answer 1

以下是对preloader图片未呈现的原因的解释：

1. preloaderImage加载
2. 加载imageLoadHandler时触发器src属性更改为主image src（因此preloaderImage即使现在已加载state也未呈现
3. 现在主图像加载
4. 加载时会呈现

你应该如何正确地做到这一点：

1. 如果您编写React应用程序，则应该以React方式执行：

   • 将图片设置为constructor方法中的组件props。你需要这样做，因为你要改变图像的渲染方式（在React中你通过改变组件state或state来实现渲染更改，在你的情况下它应该是{ {1}}）。但请注意，您应该将列表中每个图片的src属性设置为preloaderImage（例如下面我使用的是object destructuring语法）。

     constructor() {
       super();
       this.state = {
         images: this.props.images.map(image => ({
           ...image,
           src: preloaderImage
         }))
       }
     }
     

   • 现在在render方法中创建这样的图片列表（注意，这里你不需要onLoad处理程序）：

     const listWork = this.state.images.map(image => (
       <li key={image.id}>
         <div>
           <img src={image.src} />
         </div>
       </li>
     ));
     

2. 在componentWillMount方法中，开始使用vanilla JS动态加载主图像src（您可以阅读有关它的文章here）。在加载它们时，请调用setState方法来更新图像src属性：

   componentWillMount() {
     this.state.images.forEach((image, index) => {
       const {src} = this.props.images[index] // get image primary src
       const primaryImage = new Image() // create an image object programmatically
       primaryImage.onload = () => { // use arrow function here
         console.log(`image #${index + 1} is loaded!`)
         const images = [...this.state.images] // copy images array from state
         images[index].src = src // adjust loaded image src
         this.setState({
           images
         })
       }
       primaryImage.src = src // do it after you set onload handler
     })
   }
   

   使用更改后的setState数组调用images后，React会自动使用正确的src路径重新渲染您的图片。

使用CSS更优雅的方式：

您可以将<img />标记用于<div /> css属性，而不是background-image标记。在那里你可以简单地设置你的后备（预加载）图像：

background-image: url('path/to/primary-image'), url('path/to/preload-image');

您可以使用style属性动态设置路径（使用render方法）：

const listWork = this.props.images.map(image => {
  const imageStyle = {
    backgroundImage: `url(${image.src}), url(${preloaderImage});`
  }
  return (
    <li key={image.id}>
      <div>
        <div style={imageStyle} />
      </div>
    </li>
  )
})

不要忘记将height和width设置为此<div />。

Answer 2

不知道这是否有帮助，但您可以在加载时为图像设置CSS属性（例如，不透明度或可见性设置不显示图像），然后在onLoad事件时更改该CSS属性被解雇了。你可以使用相同的预加载器图像，但显然在反向模式。

如果图像无法加载，您也应该可以通过调用onError函数来设置后备操作，也可以在正在加载的图像中。

希望这有帮助！