React Dynamically renders images to improve user experience

By Andrew Wong

Translation: the original huziketang.com/blog/posts/… 英文原文 : Improve Your UX by Dynamically Rendering Images via React

Please indicate the source, keep the original link and author information

The competition in the market is very cruel. As we all know, just having a good idea is not enough to make your company a unicorn. Execution is also important. But ultimately it’s internalized into the product, and it comes down to one factor — the user experience.

User experience is not about how good your product looks, how does it perform? Is it easy to use? Make your users happy.

We’ve all had the experience of opening an app or web page and seeing an image like this, displayed from top to bottom:

With high resolution images and retina screens, it’s not uncommon for images like this to unfold slowly from top to bottom, usually just waiting for them to finish rendering.

This problem can be solved

There are usually two obvious solutions: CDN and local caching (which your browser does automatically) to make images load faster. But technically, we can also use trick methods to improve user experience by creating illusion in user perception.

The following is a two-step trick method to improve the user experience of rich media applications.

Step 1 – Use placeholders

(Use placeholders to indicate that media is loading)

Placeholders are a very popular method. In the past, it was usually a loading wheel to indicate that something was being loaded. Using placeholders is a way to communicate with the user and tell the user what is being loaded — a picture.

Facebook and LinkedIn are two great examples of using technology to improve the user experience.

Step 2 – Load the image dynamically in the DOM

The next optimization method is to download the image completely and then display it on the screen. This will avoid rendering a little bit from top to bottom while loading and displaying. We use the React onLoad event to do this. Send a request to the server to get the image file, but don’t render it in the DOM until the entire file has been downloaded

Placeholders are used to advance the user’s expectation that the image is loading. Dynamic loading is displayed after the image is downloaded, which effectively avoids the image rendering from top to bottom and further improves the user experience.

Viewing an Online Demo

I want the code!

Placeholder method

For the placeholder component (LoadingItem in this example), we can display any image we want, as follows:

    export default function () {
      return (
        <ReactCSSTransitionGroup
          transitionName="loadingItem"
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          <img className="feed__loading-item" src={img} />
        </ReactCSSTransitionGroup>)}Copy the code

In the rendering of our Feed component, we can use LoadingItem as long as there are FeedItems that have not been loaded:

    export default class Feed extends Component {... render() {return (
          <div className="feed">. {this.props.items.length > this.state.loadedItems.length &&<LoadingItem />}...</div>)}}Copy the code

throughonLoadDynamically render images

Our Feed component code looks like this:

    export default class Feed extends Component {
      constructor(props) {
        super(props)
        this.state = { loadedItems: [] }
      }
      onLoad(feedItem) {
        this.setState(({ loadedItems }) = > {
          return { loadedItems: loadedItems.concat(feedItem) }
        })
      }
      render() {
        return (
          <div className="feed">
            <h1 className="feed__h1">{this.props.name}</h1>
            {this.state.loadedItems.map((item, i) =>
              <FeedItem
                imgPath={item.imgPath}
                name={item.name}
                renderModal={this.props.renderModal}
                key={i} />
            )}
            {this.props.items.length > this.state.loadedItems.length &&
              <LoadingItem />
            }
            <div className="hidden">
              {this.props.items.map((item, i) =>
                <img 
                  src={item.imgPath} 
                  onLoad={this.onLoad.bind(this, item)} 
                  key={i} />
              )}
            </div>
          </div>
        )
      }
    }Copy the code

What’s going on in this code? There is a hidden

In this paper, the end

Is it very simple, simple instructions hope to help friends who are suffering from this problem. Examples and code are given below.

Viewing an Online Demo

View the full source code

I hope this article can help you to improve your knowledge. Welcome to communicate with me and pay attention to my “Zhihu column – front end big ha”.

I’m currently working on a little book called React.js.