如何在页面加载之前显示动画？

Question

我正在尝试从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,
       });
};

用户等待页面加载时如何显示动画？

Answer 1

您需要将加载器添加到页面并最初显示它。 那么一旦页面加载完成，就需要尽快隐藏加载器。

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(){
  
  setTimeout(()=>{
     let loader = document.getElementById('loader');
  
  // hide the loader
  loader.style = 'display: none;';
  },
             1000);  
}

代码笔

Answer 2

Ariel 的答案不会像您希望的那样为您工作。

问题是，这个解决方案首先绘制连接到外部css和js的html。 加载 js 需要一段时间，尤其是像 lottie 这样的库。

防止此问题的最佳方法是只加载您需要首先制作加载页面的 lottie 和 css。 不要害怕使用一些基本的 css 内联！！ 我知道，不推荐这样做，但请注意，它会与您的 html 同时呈现，因此在加载动画进入之前没有机会闪烁默认内容。

为容器的绝对位置编写内联样式就足够了。

请参阅此页面： https : //www.hviezdne-byvanie.sk/

绿色容器具有内联样式。 其他一切，在它之后加载。 在看到加载动画之前，您没有机会看到内容。

如何在页面加载之前显示动画？

问题描述

2 个解决方案

解决方案1
0 2021-07-19 07:42:33

解决方案2
0 2021-07-19 08:03:34

如何在页面加载之前显示动画？

问题描述

2 个解决方案

解决方案1 0 2021-07-19 07:42:33

解决方案2 0 2021-07-19 08:03:34

解决方案1
0 2021-07-19 07:42:33

解决方案2
0 2021-07-19 08:03:34