时间戳

首页 > 解决方案 > 使用Javascript重新加载后如何重复SVG动画

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

问题描述

我需要你的帮助

我为网站创建了一个预加载屏幕，徽标 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 }
    }

标签： javascriptanimationsvgloading

解决方案

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

可能的解决方案：

  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。

推荐阅读