如何在等待加载所有组件时隐藏html元素？
如何在等待加载所有组件时隐藏html元素？
提问于 2022-10-04 03:27:11
铬灯塔告诉我：
performance 89 (橙色)
Cumulative Layout Shift 0.388 (红色警报!)
Avoid large layout shifts
html：
<html>
...
<body class="loading">
...some static elements
</body>
...
</html>css：
body.loading * { display : none; }加载DOM时的js：
document.addEventListener('DOMContentLoaded', (e) => {
//do many dynamic stuff with the DOM depending on user data (& register events listeners)
})最后，当dom中的所有内容都就绪时，通过window.onload (或者如果该事件来得太快，那么一旦一切就绪，就会进行回调)：
document.body.classList.remove('loading')如果我从html灯塔中删除loading类，说明perf 100很棒。
在看到这个灯塔分析之前，我想我的布局正在从一个简单的加载(css)动画转移到一个完全就绪的页面，在加载过程中不会对用户的dom进行任何明显的更改，所以我现在假设我错了，做错了什么&遗漏了什么。
我应该如何做到这一点，而不是为了最优的加载，而不冒险有元素还没有准备好被显示？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-05 18:23:22
原来现在灯塔不再为CLS标记，尽管我没有在那里做任何更改(相反，我在HTML、CSS和JS中添加了一些代码，这些代码应该会使页面变慢)。
因此，答案是(至少在被证明并非如此之前)：
在页面加载时隐藏元素& JavaScript尚未准备好，不会对性能产生负面影响。
以下是在页面尚未准备好的情况下拥有超轻旋转器的最小代码：
const MyOnLoad = function() {
setTimeout(function(){ // only for the sake of displaying here the spinner 2 and half second obv
document.body.classList.remove('loading')
}
,2500)
}
window.onload = MyOnLoad.loading {
margin: 34vmin auto;
border: 0;
border-radius: 50%;
border-top: 0.89vmin solid red;
width: 21vmin;
height: 21vmin;
animation: spinner 2s linear infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading * {display: none;}<html>
<body class="loading">
<main>show only when page is ready</main>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73942863
复制相关文章
相似问题
腾讯云开发者
