問題描述

我在我的一個(gè)頁面中,用了幾處css background設(shè)置為圖片的, 圖片大概就是幾十K這樣..現(xiàn)在 首次 打開網(wǎng)頁時(shí), 這幾處地方明顯加載慢, 看起來像是樣式全部加載完之后, 圖片才刷出來..有什么方法可以加快css加載; 或者說.讓這些圖片加載起來和看起來頁面同步一些,不會(huì)留著一些空白等待加載!用的nginx,上了https和http2...有什么解決方案,不一定是加速.

問題解答

果斷就懶加載吧，簡單好用

預(yù)加載圖片，加入loading層，性能略有下降，但是體驗(yàn)好很多

一個(gè)頁面用到多處可以首先減少請(qǐng)求數(shù)先把圖片處理成一張ｓｐｒｉｔｅ圖，，然后再對(duì)圖片進(jìn)行壓縮，其實(shí)還是具體問題具體分析，最好是可以看到比較具體的代碼

靜態(tài)資源可以放到cdn上，圖片很大的話，建議預(yù)加載或者懶加載。懶加載時(shí)，建議用css提前占位，以免造成不必要的reflow。另：圖片偏大的話，不建議使用雪碧圖。

1.最懶的方法用lazyload

首先 雪碧圖 自是不用說 當(dāng)然 你也得看大小而定

其次 看圖片所在的區(qū)域 如果有部分圖片不在即視區(qū)的話 可以使用懶加載

如果以上條件都不滿足 就可以通過圖片壓縮 來減小圖片尺寸