Question

该项目使用Backbone.js。

我尝试通过在html主体上附加带有gif的div来实现。

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微调器：

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>

如何在页面转换期间获得动画gif？

1 个答案: