javascript - 如何在页面转换时生成 gif 动画？

Question

该元素使用 Backbone.js。

我尝试通过将带有 gif 的 div 附加到 html 正文来实现此目的。

startLoadingAnimation = function() {
  $("<div id='loading'></div>").appendTo("body"); 
}

#loading {
  display:    block;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 0, 0, 0, .8 ) 
    url('../img/loading.gif') 
    50% 50% 
    no-repeat;
}

它监听点击事件。

一切都按预期进行，但加载 gif 不运行动画。我怀疑是因为浏览器正在发出页面请求什么的，所以gif没有运行或停止运行。无论如何，有没有更好的方法在页面转换中放置“加载”动画？

任何帮助或提示将不胜感激。提前致谢。

Answer 1

您是否尝试使用 css 动画而不是加载外部资源？

您可以在网络上找到许多像这样的 css spinner:

html,
body {
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.spinner-container {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.spinner {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
  box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA;
  transform: translatez(0px);
  background: transparent;
  animation: spin 1.2s infinite;
}

@keyframes spin {
  0% {
    box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA;
    transform: rotate(0deg);
  }
  50% {
    box-shadow: 40px 0px #FB404B, 0px 40px #FFA534, -40px 0px #87CB16, 0px -40px #1DC7EA;
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="spinner-container">
  <div class="spinner"></div>
</div>