案例
由于業務的需要,需求方需要實現一個大量圖片同時加載的需求。在實現這個需求的過程中,可能會遇到很多的坑,這里小編也總結了一些優化方案,我們可以一起來看看。
具體場景
在描述如何解決問題,我們現在先來申明,問題是什么? 需求的主要內容是在某個頁面顯示 1~1000張,200~500k大小的圖。好消息是這些圖片來源于本地硬盤而非網絡。(否則這個問題就要變成優化網絡....)
踩坑歷程
由于不是純前端的項目,筆者可以從本地文件夾中讀取文件。然后一段代碼劈里啪啦的就出現了。
const fileList = this.props.fileList;
return (
<div className ="list-wrApper" >
{
fileList.map((file) => {
<img className="img-item" src= {file.src} >
})
}
< div >
)
標簽:優化return (
<div className ="list-wrApper" >
{
fileList.map((file) => {
<img className="img-item" src= {file.src} >
})
}
< div >
)