React loading 占位图

前端如果一次请求的页面上有过多的图片，可能因为图片过多而网速过慢等原因，不能一次加载出来，为此占位符是必须添加的。

这时就可以自己简单写个组件，来实现懒加载，我们现在模拟个接口。模拟加载的端口一共有十个 JSON 信息，我们只需要根据提供的图片地址来加载图片。

所以整体的思路就是：

• 根据请求来加载图片
• 使用自定义组件把图片地址下传
• 子组件创建虚拟的 image 标签，检测图片是否加载完成来显示 loading 图或真正的图片。

请求图片和图片下传：

import React, { Component } from 'react';
import axios from "axios";
import "../css/css.css";
import LazyLd from "./LazyLd";

export default class App extends Component {
    constructor(){
        super();
        this.state = {
            res : []
        }
    }
    componentWillMount(){
        axios.get("http://192.168.2.250/car").then(data=>{
            this.setState({
                res : data.data.results
            })
        })
    }
    render() {
        return (
            <div>
                <ul className = "cur" id="images">
                {
                    this.state.res.map((item,index) => <li key = {index}><LazyLd width = {150} height = {100}  src={`http://192.168.2.250/images/carimages_small/${item.id}/view/${item.image}`}></LazyLd></li>)
                }
                </ul>
            </div>
        )
    }
}

懒加载组件：

import React, { Component } from 'react'

export default class LazyLd extends Component {
    constructor(){
        super();
        this.state = {
            done : false
        }
    }
    componentWillMount(){
        // 创建一个虚拟图片
        const img = new Image();
        // 发出请求，请求图片
        img.src = this.props.src;
        // 当图片加载完毕
        img.onload = () => {
            this.setState({
               done : true
            });
        }
    }
    render() {
        return (
            <div>
                 {
                        this.state.done
                        ?
                        <img style={{
                            'width': this.props.width + 'px',
                            'height': this.props.height + 'px'
                        }} src={this.props.src} />
                        :
                        <img style={{
                            'width': this.props.width + 'px',
                            'height': this.props.height + 'px'
                        }} src= "此处是经过 base64 转码的loading图链接"/>
                }
            </div>
        )
    }
}

把网速调慢实现结果：

loading 占位图.gif