【React】antd轮播图走马灯解决闪屏办法

前言

• antd这个走马灯使用很频繁，但使用过程中，会发现它有个闪屏过程。
• 经过打断点发现，导致闪屏原因有2个：
• 一，外层容器未设高度。如果外层容器未设置高度，那么每次加载时，所有需要放入走马灯的图片都会以纵向排布方式排完后再进行组装成轮播图样子。这样首次渲染的布局也会打乱。
• 二、图片顺序不对。当设定外层容器高度后，每次加载时，第一张需要显示的图片并不是其排列的图片，导致图片一闪而过的花屏。

解决方案

• 这个走马灯组件比较复杂， 实际用的是React-Slick的组件。这个组件里有个选项叫lazyLoad，可以设置是否渐进式加载，也就是先加载第一张图片，然后等页面别的图片加载完了，再加载其余图片。这样就可以解决顺序问题。如下：

<Carousel lazyLoad="progressive">
{...map()...}
</Carousel>

• 更多配置选项参考react-slick文档，可以说选项真是太多了。。。
• 另外记得把外层容器高给定死。