首頁(yè) 猿問(wèn) 響應(yīng)式菜單 (mmenu) 導(dǎo)致...

響應(yīng)式菜單 (mmenu) 導(dǎo)致 CLS 高

JavaScript

瀟瀟雨雨 2023-11-02 16:59:26

我在我的網(wǎng)站上使用mmenu作為響應(yīng)式菜單。我最近注意到，在 Google 搜索控制臺(tái)中，由于 CLS（累積布局偏移）較高而出現(xiàn)錯(cuò)誤。我檢查了一下，確實(shí)如此，當(dāng)我嘗試以“慢速”模式打開(kāi)頁(yè)面半秒時(shí)，我看到原始菜單結(jié)構(gòu)，然后加載菜單（在 jQuery 準(zhǔn)備就緒等之后）并且頁(yè)面顯示正確。我的簡(jiǎn)化頁(yè)面結(jié)構(gòu)是： $(document).ready(function() { $("#menu").mmenu({ "extensions": ["pageshadow"], "header": { "title": "Menu", "add": true, "update": true } }, { // config offCanvas: { pageSelector: "#container" } }); }); <html> <head> </head> <body> <nav id="menu"> <ul> <li><a>Categories</a> <ul> <li> <a href="https://example.com/1">Link 1</a> </li> <li> <a href="https://example.com/2">Link 2</a> </li> <li> <a href="https://example.com/3">Link 3</a> </li> </ul> </nav> <div class="content">This is content</div> </body> </html>您認(rèn)為，是否可以在此處應(yīng)用任何快速修復(fù)來(lái)解決我的 CLS 問(wèn)題？

查看完整描述

3 回答

慕標(biāo)琳琳

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

#menu沒(méi)有任何使用 mmenu 的經(jīng)驗(yàn)，使用 CSS 隱藏并僅在菜單初始化后才顯示它難道不就足夠了嗎？

這似乎對(duì)我有用：

<html>

<head>

</head>

$(document).ready(function() {

$("#menu").mmenu({

"extensions": ["pageshadow"],

"header": {

"title": "Menu",

"add": true,

"update": true

}

}, {

// config

offCanvas: {

pageSelector: "#container"

}

}).css("display", "");

});

</script>

</head>

<body>

</nav>

<div class="content">This is content</div>

</body>

</html>

反對(duì) 回復(fù) 2023-11-02

SMILET

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

我處理這個(gè)問(wèn)題的方法是使用一個(gè)與問(wèn)題元素具有相同大小/形狀/顏色的虛擬元素來(lái)充當(dāng)占位符，同時(shí)隱藏問(wèn)題元素。加載 jQuery 后，我將刪除/隱藏虛擬元素并顯示問(wèn)題元素。

反對(duì) 回復(fù) 2023-11-02

慕姐4208626

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

如果沒(méi)有看到實(shí)際的代碼，很難回答，但是為了不必等待整個(gè)頁(yè)面準(zhǔn)備好，您可以以不需要使用 jQuery 調(diào)用的方式定位腳本ready。

嘗試以下操作：
1 - 在本地加載 jQuery，而不是從 CDN
2 - 將 jQuery 腳本標(biāo)記放在實(shí)際的正文 html 數(shù)據(jù)之前，并將該mmenu調(diào)用放在正文的 html 代碼之后，這樣在加載所有內(nèi)容之前不會(huì)顯示內(nèi)容

另一種選擇是讓你的主體顯示加載動(dòng)畫(huà)，直到 jQuery 和其他 cdns 加載完畢，這樣你就能夠獲取所有內(nèi)容，運(yùn)行該 mmenu 調(diào)用，然后才向用戶顯示內(nèi)容，這種方法有點(diǎn)多用戶友好然后是我建議的，因?yàn)樗鼘?shí)際上不會(huì)顯示空白屏幕，而是顯示一些反饋，表明正在為連接速度較慢的用戶加載內(nèi)容。

反對(duì) 回復(fù) 2023-11-02