1.0.1 • Published 4 years ago

react-lazyloadcomponent-image v1.0.1

Weekly downloads
2
License
MIT
Repository
-
Last release
4 years ago

#demo

render() {
		const { images, list } = this.state;
		return (
			<div>
				<ReactLazyLoadComponent>
					{ images.map(item => {
						return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item }
						                                                                height={ 400 } alt=""/>
						</div>;
					}) }
				</ReactLazyLoadComponent>
				<ReactLazyLoadComponent>
					{
						list.map(item => {
							return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item } src={ defaultImg }
							                                                                height={ 400 } alt=""/>
							</div>;
						})
					}
				</ReactLazyLoadComponent>
			</div>
		);
	}

有data-src属性的img具有懒加载效果,如果同时设置src属性,那么src属性的图片会作为默认图片显示,data-src为最终显示图片