首頁(yè) 猿問(wèn) 關(guān)于數(shù)據(jù)懶加載問(wèn)題

關(guān)于數(shù)據(jù)懶加載問(wèn)題

JavaScript

慕森王 2019-02-27 13:13:40

目前的方案是數(shù)據(jù)在頁(yè)面加載完后全部由后端渲染到前端頁(yè)面，但是這樣速度慢，也容易造成卡頓。用戶體驗(yàn)不是很好，目前想使用前端進(jìn)行懶加載，那么前端如何操作呢？

查看完整描述

1 回答

翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

懶加載可以在需要顯示圖片的時(shí)候，才下載圖片，所以可以減少服務(wù)器的壓力，避免不必要的資源下載，在頁(yè)面載入的時(shí)候?qū)㈨?yè)面上的img標(biāo)簽的src指向一個(gè)站位的圖片（都是一模一樣圖片方便緩存），把真實(shí)地址存放在一個(gè)自定義屬性中，這里我用data-src來(lái)存放，例如：

然后獲取img標(biāo)簽當(dāng)圖片出現(xiàn)在可視區(qū)域的時(shí)候（和按需加載判斷的方法是一樣的）那么就把真實(shí)的src地址給賦值上

反對(duì) 回復(fù) 2019-03-03