页面加载动画方法(Page Loading Animation Method)

所以，我在找显示加载动画，而我的页面加载的其余部分的最佳途径。

我一直在寻找，使动画快速加载的方法，一旦停止该网站是加载和动画设置为显示：无，是一种具有良好帧率高品质，适用于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>

而我的页面加载的其余部分

使用.onload函数来确定当内容已经被完全加载的JavaScript。

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

文章来源: Page Loading Animation Method