我在我的网站上使用mmenu作为响应式菜单。我最近注意到，在 Google 搜索控制台中，由于 CLS（累积布局偏移）较高而出现错误。我检查了一下，确实如此，当我尝试以“慢速”模式打开页面半秒时，我看到原始菜单结构，然后加载菜单（在 jQuery 准备就绪等之后）并且页面显示正确。我的简化页面结构是： $(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>您认为，是否可以在此处应用任何快速修复来解决我的 CLS 问题？
3 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
#menu没有任何使用 mmenu 的经验，使用 CSS 隐藏并仅在菜单初始化后才显示它难道不就足够了吗？
这似乎对我有用：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.min.css" />
</head>
<script type="text/javascript" data-no-instant>
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
}).css("display", "");
});
</script>
</head>
<body>
<nav id="menu" style="display: none">
<!-- <nav> content from your example -->
</nav>
<a href="#menu">open menu</a>
<div class="content">This is content</div>
</body>
</html>
SMILET
TA贡献1796条经验 获得超4个赞
我处理这个问题的方法是使用一个与问题元素具有相同大小/形状/颜色的虚拟元素来充当占位符，同时隐藏问题元素。加载 jQuery 后，我将删除/隐藏虚拟元素并显示问题元素。
慕姐4208626
TA贡献1852条经验 获得超7个赞
如果没有看到实际的代码，很难回答，但是为了不必等待整个页面准备好，您可以以不需要使用 jQuery 调用的方式定位脚本ready。
尝试以下操作：
1 - 在本地加载 jQuery，而不是从 CDN
2 - 将 jQuery 脚本标记放在实际的正文 html 数据之前，并将该mmenu调用放在正文的 html 代码之后，这样在加载所有内容之前不会显示内容
另一种选择是让你的主体显示加载动画，直到 jQuery 和其他 cdns 加载完毕，这样你就能够获取所有内容，运行该 mmenu 调用，然后才向用户显示内容，这种方法有点多用户友好然后是我建议的，因为它实际上不会显示空白屏幕，而是显示一些反馈，表明正在为连接速度较慢的用户加载内容。
添加回答
举报
0/150
提交
取消