文章詳情頁(yè)
前端 - 如何加速css background圖片的加載速度
瀏覽：123日期：2023-08-14 17:37:10
問(wèn)題描述
我在我的一個(gè)頁(yè)面中,用了幾處css background設(shè)置為圖片的, 圖片大概就是幾十K這樣..現(xiàn)在 首次 打開(kāi)網(wǎng)頁(yè)時(shí), 這幾處地方明顯加載慢, 看起來(lái)像是樣式全部加載完之后, 圖片才刷出來(lái)..有什么方法可以加快css加載; 或者說(shuō).讓這些圖片加載起來(lái)和看起來(lái)頁(yè)面同步一些,不會(huì)留著一些空白等待加載!用的nginx,上了https和http2...有什么解決方案,不一定是加速.
問(wèn)題解答
回答1：果斷就懶加載吧，簡(jiǎn)單好用
回答2：預(yù)加載圖片，加入loading層，性能略有下降，但是體驗(yàn)好很多
回答3：一個(gè)頁(yè)面用到多處可以首先減少請(qǐng)求數(shù)先把圖片處理成一張ｓｐｒｉｔｅ圖，，然后再對(duì)圖片進(jìn)行壓縮，其實(shí)還是具體問(wèn)題具體分析，最好是可以看到比較具體的代碼
回答4：靜態(tài)資源可以放到cdn上，圖片很大的話(huà)，建議預(yù)加載或者懶加載。懶加載時(shí)，建議用css提前占位，以免造成不必要的reflow。另：圖片偏大的話(huà)，不建議使用雪碧圖。
回答5：1.最懶的方法用lazyload
回答6：首先 雪碧圖 自是不用說(shuō) 當(dāng)然 你也得看大小而定
其次 看圖片所在的區(qū)域 如果有部分圖片不在即視區(qū)的話(huà) 可以使用懶加載
如果以上條件都不滿(mǎn)足 就可以通過(guò)圖片壓縮 來(lái)減小圖片尺寸
標(biāo)簽：
CSS
上一條：javascript - nginx 反向代理 js跨域問(wèn)題？下一條：vue.js - centos 使用vue-cli. 執(zhí)行npm run dev 報(bào)錯(cuò)
相關(guān)文章：
1. 怎么在phpstudy中用phpexcel上傳數(shù)據(jù)到MYSQL？2. javascript - 百度搜索網(wǎng)站，如何讓搜索結(jié)果顯示一張圖片加上一段描述，如圖；求教3. phpadmin的數(shù)據(jù)庫(kù)，可以設(shè)置自動(dòng)變化時(shí)間的變量嗎？就是不需要接收時(shí)間數(shù)據(jù)，自動(dòng)變化4. html5和Flash對(duì)抗是什么情況？5. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過(guò)段時(shí)間會(huì)消失是什么情況？6. nginx - 使用wordpress搭建博客，怎么實(shí)現(xiàn)真實(shí)服務(wù)器使用HTTP，然后使用UPYUN的HTTPS加密？7. javascript - win7 npm安裝gulp失敗，已是管理員打開(kāi)，也設(shè)置了文件權(quán)限8. redis - 新浪微博里的共同好友的查找是如何實(shí)現(xiàn)的9. html - 爬蟲(chóng)時(shí)出現(xiàn)“DNS lookup failed”，打開(kāi)網(wǎng)頁(yè)卻沒(méi)問(wèn)題，這是什么情況？10. mac里的docker如何命令行開(kāi)啟呢？
排行榜
熱門(mén)標(biāo)簽
網(wǎng)公網(wǎng)安備