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

Question

I am trying to display wait animation from https://lottiefiles.com/我正在尝试从https://lottiefiles.com/显示等待动画

I created a JavaScript function, a region on the page 0 and call the function with dynamic action and it works, but display animation with all regions together.我创建了一个 JavaScript 函数，页面 0 上的一个区域并使用动态动作调用该函数并且它可以工作，但是将所有区域一起显示动画。

Function:功能：

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,
       });
};

How to display animation when users waiting for page load?用户等待页面加载时如何显示动画？

Answer 1

You need to add the loader to the page and display it initially.您需要将加载器添加到页面并最初显示它。 Then once the page load is complete, you need to hide the loader as soon as possible.那么一旦页面加载完成，就需要尽快隐藏加载器。

HTML: 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: 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: JS：

function removeLoader(){
  
  setTimeout(()=>{
     let loader = document.getElementById('loader');
  
  // hide the loader
  loader.style = 'display: none;';
  },
             1000);  
}

CodePen代码笔

Answer 2

The Ariel's answer will not work for you as you would like to. Ariel 的答案不会像您希望的那样为您工作。

The problem is, that this solution first draw html which is connected to external css and js.问题是，这个解决方案首先绘制连接到外部css和js的html。 It takes a while to load js and especially with library like lottie is.加载 js 需要一段时间，尤其是像 lottie 这样的库。

The best way to prevent this problem is load just lottie and css you need to make loadpage first.防止此问题的最佳方法是只加载您需要首先制作加载页面的 lottie 和 css。 Don't be afraid to use some basic css inline!!不要害怕使用一些基本的 css 内联！！ I know, it is not recommended, but note, it will render in the same time with your html, so there is no chance to blink default content before load animation comes in.我知道，不推荐这样做，但请注意，它会与您的 html 同时呈现，因此在加载动画进入之前没有机会闪烁默认内容。

It is enough to write inline style for absolute position of the container.为容器的绝对位置编写内联样式就足够了。

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

The green container has inline styles.绿色容器具有内联样式。 Everything else, loads after it.其他一切，在它之后加载。 You have no chance to see content before you see loading animation.在看到加载动画之前，您没有机会看到内容。

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

问题描述

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