我正在尝试显示来自 https://lottiefiles.com/
的等待动画我创建了一个 JavaScript 函数，即页面 0 上的一个区域，并使用动态动作调用该函数，它可以工作，但会与所有区域一起显示动画。
功能：
function createLoadAnimation() {
document.getElementById("LoadAnimation1").innerHTML = "";
const anim2 = lottie.loadAnimation({
container: document.getElementById('LoadAnimation1'),
path: `https://assets10.lottiefiles.com/packages/lf20_wd6xyqkx.json`,
renderer: 'svg',
loop: false,
autoplay: true,
});
};
用户等待页面加载时如何显示动画？
Ariel 的答案不会像你想要的那样为你工作。
问题是，这个解决方案首先绘制连接到外部css和js的html。加载js需要一段时间，尤其是像lottie这样的库。
防止这个问题的最好方法是只加载lottie和css，你需要先制作loadpage。不要害怕使用一些基本的 css 内联！！我知道，不建议这样做，但请注意，它将与您的 html 同时渲染，因此在加载动画进入之前没有机会闪烁默认内容。
容器的绝对位置写内联样式就足够了。
请参阅此页面： https://www.hviezdne-byvanie.sk/
绿色容器具有内联样式。其他一切都在它之后加载。在看到加载动画之前，您没有机会看到内容。
您需要将加载器添加到页面并初始显示。那么一旦页面加载完成，你需要尽快隐藏加载器。
HTML：
</head>
<body onload="removeLoader();">
<!-- Loader here -->
<div id="loader"><p id="loader-content">Loading...</p></div>
<div>Inner content here</div>
</body>
</html>
CSS：
html {
padding: 0;
margin: 0;
height: 100%;
}
#loader {
justify-content: center;
align-items: center;
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
z-index: 99999;
background: #f30
}
#loader p {
text-align: center;
color: #fff;
font-weight: bold;
font-size: 100px;
padding: 0;
margin: 0;
}
JS：
function removeLoader(){
let loader = document.getElementById('loader');
// hide the loader
loader.style = 'display: none;';
}