使用CSS动画加载图像VS使用GIF图像加载

Question

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

1个已加载CSS的页面

1. 使用加载CSS动画创建的页面
2. 已加载GIF图片的已创建页面
3. 使用Chrome任务管理器比较资源

结果如下：

看起来CSS动画使用的CPU更多，内存更多 所以基本上我想咨询一下使用CSS动画。这不是太重了吗？我应该避免在装载案件中使用它吗？

Loading example using CSS animation

Loading example using GIF image



以下是加载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

<div id="loadingWrap">
   <div id="loadingIcon">
      <i class="glyphicon glyphicon glyphicon-cog spin">Q</i>
   </div>
</div>

以下是使用简单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

<div id="loadingWrap">
   <div id="loadingIcon">
   </div>
</div>

Answer 1

Gif图片：

• 肯定

  • 效果（文件较小）
  • 易于使用＆amp;设置
  • 较旧的浏览器支持

• 否定：

  • 不能平滑缩放（视网膜显示，放大图像）
  • 图像质量（256色限制）
  • 难以适应＆amp;改变（需要像Photoshop这样的专业软件）

Css动画：

• 肯定：

  • 通过CSS轻松编辑
  • 高质量的图像和丰富的色彩
  • 平滑缩放（视网膜准备图像和svgs）

• 否定：

  • 性能
  • IE 7,8,9
  不支持CSS动画
  • 设置更复杂