时间戳

首页 > 解决方案 > 如何在页面加载前显示动画？

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

问题描述

我正在尝试显示来自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,
       });
};

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

标签： javascriptjqueryoracle-apex

解决方案

您需要将加载程序添加到页面并最初显示它。然后一旦页面加载完成，您需要尽快隐藏加载器。

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

代码笔

推荐阅读