我在執行繁重的

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

總結

以上是生活随笔為你收集整理的html加载gif动画效果,html – 使用CSS动画加载图像VS使用GIF图像加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。