页面加载动画方法 [英] Page Loading Animation Method

问题描述

因此，我正在寻找在页面其余部分加载时显示加载动画的最佳方法。

So I'm looking for the best way to display a loading animation while the rest of my page loads.

我一直在寻找一种方法，该方法可以使动画快速加载，在网站加载并且动画设置为显示后停止播放：无，高质量

I've been looking for a method that allows the animation to load quickly, stops once the website is loaded and the animation is set to display: none, is high quality with good framerate, and works on IE8 and above.

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

The options that I'm aware of are a gif animation, SVG, plain CSS or javascript. I'm thinking of the animation being as simple as this one, but am not limited to just that. https://d13yacurqjgara.cloudfront.net/users/21046/screenshots/1127381/sample.gif

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

Which method would best fit my needs?

推荐答案

可在IE8及更高版本上使用。

works on IE8 and above.

使用.GIF，CSS动画，转换将不受支持，JavaScript您将不得不考虑浏览器的差异以及我不确定的SVG。

Use a .GIF, CSS animation using transforms will not be supported, JavaScript you will have to account for browser differences and SVG I'm not fully sure on.

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

I've been looking for a method that allows the animation to load quickly,

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

Any CSS to do with displaying the animation should be placed in the pages mark up (internal), this will ensure that it renders instantaneously on page load.

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

而其余页面会加载

while the rest of my page loads

使用JavaScripts .onload 函数确定何时完全加载了内容。

Use JavaScripts .onload function to determine when the content has been fully loaded.

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

这篇关于页面加载动画方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！