Skeleton Screen 总结

[Hanzhuo0322]

Skeleton Screen 总结

概念

• Skeleton Screen（加载占位图）是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

结合React

• Skeleton Screen结合React，结合React以组件的形式进行展示，并和radial-gradient、linear-gradient（线性渐变和径向渐变）相结合实现动态的加载控件。

Sleketon组件的代码如下:

import React, { Component } from 'react';

const css = (id, color = '#f5f5f5') =>
    `.react-loading-theme {
            background-image: 
                radial-gradient(circle 17px at 31px 59px, ${color} 99%, transparent 0),
                linear-gradient(99deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 89%),
                linear-gradient(${color} 16px, transparent 0),
                linear-gradient(${color} 16px, transparent 0);
            
            background-repeat: repeat-y;
            
            background-size:
                 295px 200px, 
                 29px 0px, 
                 136px 308px;
                 
            background-position: 
                0px -30px, 
                0 0, 
                56px 21px, 
                17px 63px;
                
            animation: shine 2.5s infinite;
        }
        
        @keyframes shine {
            to {
                background-size: 250px 200px, 12px, 150px 250px, 350px 200px, 300px 200px, 250px 200px;
            }
        }`;

const createStyleElement = (css) => {
    const element = document.createElement('style');
    element.textContent = css;
    document.head.appendChild(element);
    return element;
};

export default class Skeleton extends Component {

    constructor(props) {
        super(props);
    }
    componentWillMount() {
        this.style = createStyleElement(css(
            this.id, this.props.color, this.props.highlightColor
        ));
    }

    componentWillUnmount() {
        this.style.remove();
    }
    render() {
        const elements = [];
        for (let i = 0; i < this.props.count; i++) {
            elements.push(
                <div id="skeleton" key={i}>&zwnj;</div>
            );
        }

        const Wrapper = this.props.wrapper;
        return (
            <div className={`react-loading-theme`}>
                {
                    Wrapper
                        ? elements.map((element, i) =>
                            <Wrapper key={i}>{element}&zwnj;</Wrapper>
                        )
                        : elements
                }
            </div>
        );
    }
}

Skeleton.defaultProps = {
    count: 1,
    wrapper: null
};

组件使用

• 当ajax请求的数据不为空时, 将初始设置的isLoading属性设置为false，默认true，当第一次加载时首先加载相应的Skeleton组件，加载页面实现加载的无缝连接。
• Skeleton Screen目前提供两个参数 Wrapper和 color 前者是Skeleton组件中传入的标签（p 、span、div）, 这样可以满足开发需求。color 可以设置加载占位图的颜色，具体需求来实现展位图的颜色。 <Skeleton Wrapper="div" color="red" />

效果图