html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载

我在执行繁重的

JavaScript操作时遇​​到了显示加载CSS动画的问题,因此想知道CSS动画是否比显示简单的加载GIF图像需要更多资源,我进行了以下测试.

1个已创建的页面,加载CSS

>创建加载CSS动画的页面

>创建了加载GIF图像的页面

>使用Chrome任务管理器比较他们的资源

结果如下：

看起来CSS动画使用的CPU更多,内存更多

所以基本上我想咨询一下使用CSS动画.这不是太重了吗？我应该避免在装载箱子中使用它吗？

这是用于加载CSS动画的代码

CSS

/* Beautiful loading screen */

#loadingWrap{

width: 100%;

height: 100%;

top: 0px;

z-index: 250;

background-color: rgba(255, 255, 255, 0.46);

}

.glyphicon.spin {

font-size: 36px;

-webkit-animation: spin 1.822s infinite linear;

-moz-animation: spin 1.822s infinite linear;

-o-animation: spin 1.822s infinite linear;

animation: spin 1.822s infinite linear;

-webkit-transform-origin: 50% 58%;

transform-origin:50% 58%;

-ms-transform-origin:50% 58%; /* IE 9 */

line-height: 0px;

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

@keyframes spin {

from { transform: rotate(0deg); }

to {transform: rotate(360deg); }

}

#loadingIcon {

z-index: 10;

position: absolute;

right: 20px;

bottom: 20px;

line-height: 0px;

}

HTML

Q

这是使用简单GIF图像加载的代码

CSS

#loadingWrap{

width: 100%;

height: 100%;

top: 0px;

z-index: 250;

background-color: rgba(255, 255, 255, 0.46);

}

#loadingIcon {

z-index: 10;

position: absolute;

right: 20px;

bottom: 20px;

line-height: 0px;

background: url(../1-0.gif) no-repeat center center;

width: 20px;

height: 20px;

}

HTML