用于图像网格的react-lazy-load

Question

我的react应用程序中有图像网格。我使用sprites来显示div网格的图像。每个10个div使用一个单独的url来显示缩略图。我要展示的拇指大概有16000个。我正在尝试使用react-lazy-load。这就是我尝试过的

<LazyLoad height={200} offset={100}>
                                    <div className="thumb">
                                        <div className="thumb-inner">
                                            <div className="image" style={{backgroundImage: `url('${sprite.url}')`, backgroundPositionX: -((i % 10) *100) + "px", backgroundPositionY: -(82 * Math.floor(i/10))}}></div>
                                            <div className="timestamp">01:15:12</div>
                                        </div>
                                    </div>
                                    </LazyLoad>

这并没有像预期的那样执行。当与之对应的div在viewport中时，我希望它调用image url。目前，所有的图像urls都是同时调用的。

Answer 1

下载照片前，高度等于0。因此，您必须为照片的父对象定义高度。

links.map(item => {
return (<div className="your-grid-container">
   <LazyLoad height={200} offset={100}>
        <div className="your-image-container">
            <img link={item}/>
        </div>
    </LazyLoad
</div>)
})


.your-grid-container{
   display : grid;
}

.your-image-contaner{
   height : 200px; // bingoooo, now  grid container can calculate correctly
}

Demo -查看网络控制台以更好地了解。