Question

我的React应用程序中有图像网格。我正在使用精灵来显示div网格的图像。每10个div使用一个网址显示缩略图。我必须显示大约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在视口中时，它会调用图像URL。当前，所有图像网址都被一起调用。

Answer 1

在下载照片之前，高度等于零。因此，您必须为照片的父级定义高度。

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- 观看网络控制台以获得更好的理解。

图像网格的lazy-lazy-load

1 个答案: