使用Javascript重新加载后如何重复SVG动画

Question

我需要你的帮助

我为网站创建了一个预加载屏幕，徽标 SVG 动画运行良好，但唯一让我感到困惑的是：每次重新加载时，动画都没有发生，但是 3 秒的装载机功能正常。

这是网站：http : //itsrev.io

这是代码：

var loaderScreen;

  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("banner").style.display = "block";
  }

  function loadingFunction() {
    loaderScreen = setTimeout(showPage, 4000);
  }

CSS：

 /**************************************
    Preloader
    ***************************************/
    #loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #banner {
      display: none;
    }

    /* Add animation to "page content" */
    #banner {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 }
      to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
      from{ bottom:-100px; opacity:0 }
      to{ bottom:0; opacity:1 }
    }

Answer 1

正在缓存图像。动画完成后，它会保持缓存状态。

可能的解决方案：

1. 考虑在 HTML 中内联 SVG，或者

2. 强制浏览器每次都重新加载 SVG。您可以通过让服务器为 SVG 文件设置缓存控制标头来做到这一点。或者您可以使用页面上的 javascript 每次更改图像的 URL。

例如，类似于以下内容：

<div id="loader">
  <img width="400"/>
</div>


function loadingFunction() {
  var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
  document.querySelector("#loader img").setAttribute("src", url);
  loaderScreen = setTimeout(showPage, 4000);
}

浏览器logo?r=12345与logo?r=98765.