Question

所以我正在寻找在我的页面其余部分加载时显示加载动画的最佳方式。

我一直在寻找一种方法，允许动画快速加载，一旦网站加载停止并且动画设置为display：none，具有良好帧率的高质量，并且适用于IE8及以上版本

我所知道的选项是gif动画，SVG，纯CSS或javascript。我认为动画就像这个一样简单，但并不仅限于此。 https://d13yacurqjgara.cloudfront.net/users/21046/screenshots/1127381/sample.gif

哪种方法最符合我的需要？

Answer 1

适用于IE8及以上版本。

使用.GIF，不支持使用转换的CSS动画，JavaScript必须考虑浏览器差异和SVG我不完全确定。

我一直在寻找一种允许动画快速加载的方法，

任何与显示动画有关的CSS都应该放在页面标记（内部）中，这样可以确保它在页面加载时立即呈现。

<style> 
  #loader{
   display: block;
   width: 10%;
   height: 10%;
   position: absolute;
   top: 45%;
   left: 45%;
   background-image: url(loader.gif);
   background-size: cover;
 }
</style>

我的页面的其余部分加载

使用JavaScripts .onload 功能确定内容何时已完全加载。

window.onload = function () { document.getElementById("loader").style.display = "none"; }

页面加载动画方法

1 个答案: