页面加载动画方法

【问题标题】：Page Loading Animation Method页面加载动画方法
【发布时间】：2015-08-14 21:45:22
【问题描述】：

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

我一直在寻找一种方法，它可以让动画快速加载，一旦网站加载就停止并且动画设置为显示：无，高质量和良好的帧率，并且适用于 IE8 及更高版本。

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

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

【问题讨论】：

您在寻找什么？你想要gif图片吗？
我愿意接受满足上述需求的最佳选择。

标签： javascript css animation gif

【解决方案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>

当我的页面的其余部分加载时

使用 JavaScript 的 .onload 函数来确定内容何时已完全加载。

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

【讨论】：