React Typescript音乐播放器项目笔记：1、图片懒加载组件优化

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy

图片懒加载组件优化

代码如下：往往一个项目不止一处需要图片懒加载，可能不同的页面不同的场景需要懒加载，对应的目标元素的className不能设置为同一个，因为在切换页面或者场景的时候，可能获取到了不同页面或者场景的元素，会出现bug，因此这里为每个场景都设置不一样的className标志。提高复用度。

/**
 * @Description: 在使用该组件时需要传入的必选参数为className
 *                 className中第一个class是用于选择需要懒加载的元素，其他的class则是表示样式
 * @author: liaohuanyu
 * @date 2019/2/1
*/
import React,{Component} from "react";
import LazyLoad from "common/js/lazyload.es2015.js"
import logo from "./logo@2x.png"

interface LazyImageProps{
    className:string,
    alt?:string,
    src?:string,
    srcset?:string,
    sizes?:string,
    width?:string,
    height?:string,
    containerClassName?:string
}

interface LazyImageState{

}


export class LazyImage extends Component <LazyImageProps, LazyImageState> {
    lazyLoadInstance:any
    constructor(props:LazyImageProps){
        super(props);
        this.lazyLoadInstance = null;
    }

    // Update lazyLoad after first rendering of every image
    componentDidMount() {
        // console.log('lazyLoadInstance')
        if(!this.lazyLoadInstance){
            let container;
            try{
                container = document.getElementsByClassName(this.props.containerClassName+"")[0]
            }
            catch(err){
                container = null;
            };
            const lazyloadConfig = {
                elements_selector: "."+this.props.className.split(" ")[0],
                container: container,
                threshold:0
            };
            this.lazyLoadInstance = new LazyLoad(lazyloadConfig);
        }
        this.lazyLoadInstance.update();
    }
    render() {
        const { alt, srcset, sizes, width, height, className } = this.props;
        let src = this.props.src ? this.props.src : logo;
        return (
            <img
                alt={alt}
                className={className}
                src={logo}
                data-src={src}
                data-srcset={srcset}
                data-sizes={sizes}
                width={width}
                height={height}
            />
        );
    }
}

export default LazyImage;