使用React和CSS淡入淡出加载图片：快速指南

Web开发人员和MVB展示了他如何在React中创建一个组件，使您可以使用CSS和React淡入缓存加载的图像。

假设你想在你的网站上加载一些图片。你不希望他们只是弹出存在，吓倒用户。效果很好，效果更好。

这是问题：没有好的预制React组件。或者我吮吸找到它。

有一个react-lazyload，它为你做了一个懒惰的加载部分。它使组件不会挂载到DOM中，直到用户真正看到它们。

这有助于加快您的网站加载速度。用户不需要加载大图像，直到用户可以看到它们。

但是，默认的体验可能会令人震惊。当图像最终加载时，他们只是弹出视图。

react-lazyload提供了一个淡入的例子，但它已经过时了，不适用于现代图书馆。而且使用起来很麻烦。

所以我建立了一个通用FadeIn组件。我会开放它，但它需要一些波兰首先，我希望你的意见，如何做得更好。

该组件只有40行代码。很简单。

class FadeIn extends React.Component {

state = {

loaded: false ,

} ;

onLoad = ( ) => this.setState ( { loaded: true } ) ;

render( ) {

const { height, children } = this.props ,

{ loaded } = this.state ;

return (

<LazyLoad height= {height} offset= { 150 } >

<Transition in = {loaded} timeout= {duration} >

{state =>

<div style= { { ...defaultStyle , ...transitionStyles [state] } } >

{children( this.onLoad ) }

</div> }

</Transition>

</LazyLoad>

) ;

}

}

FadeIn.propTypes = {

height: PropTypes.number ,

children: PropTypes.func ,

} ;

FadeIn保持本地loaded状态以跟踪显示内容。

false意思是“保持透明”，

true意思是“完全不透明”。

它使用react-lazyload的LazyLoad组件来处理延迟加载的部分，并且Transition从react-transition-group来驱动CSS渐变来淡入。这是自正式的淡入淡出的例子以来改变了很多的部分。

使用儿童渲染功能的方法，你可以要求FadeIn渲染任何你想要的。它被包装在处理淡入淡出效果的div中。

所有你需要做的就是触发onLoad回调，一旦你的内容准备就绪。当你的图像完成加载例如。

你渲染<FadeIn>，给它一个高度，所以事情不会跳来跳去，并通过一个onLoad回调的儿童功能。当您准备好触发转换时，您可以调用onLoad并FadeIn执行它的操作。

你知道onLoad所有的浏览器支持一个内置的DOM回调吗？我不知道。

onLoad是非常重要的，因为如果没有它，FadeIn过渡可能会在图像甚至落入管道之前结束。这是我面临的第一个问题，当我livecoded此。