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

Question

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

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

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

结果如下:

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

使用CSS动画加载示例

使用GIF图像加载示例

这是用于加载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图片：

• 正能量

  • 性能（小文件大小）
  • 易于使用和设置
  • 旧浏览器支持

• 否定：

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

CSS动画：

• 正面：

  • 可通过 CSS 轻松编辑
  • 高质量图像和丰富色彩成为可能
  • 平滑缩放（视网膜就绪图像和 svgs）

• 否定：

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