鍍金池/ 問答/HTML5  室內(nèi)設(shè)計  HTML/ 在頁面還未加載完畢前，svg的動畫效果失效？

在頁面還未加載完畢前，svg的動畫效果失效？

現(xiàn)在在做一個vue-cli的項目，因為頁面較多首屏加載有點慢，為了提高用戶的體驗所以在vue-cli首屏加載的時候加一個svg的loading圖片，我是直接加在了index.html中，在頁面未加載完畢時顯示，加載完畢消失，現(xiàn)在碰到個問題就是這個svg在頁面還未完全加載完畢時并不會顯示動畫效果，只會是一個靜態(tài)的圖片，這個如何解決
下面是vue-cli中index.html的代碼

<!DOCTYPE html>
<html style="font-size: 37.5px">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="./static/js/flexible.js"></script>
  </head>
  <body>
   <svg version="1.1" id="Layer_Svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="150px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="5.43968" width="4" height="20.1206" fill="#333">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="10" y="8.56032" width="4" height="13.8794" fill="#333">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="20" y="12.5603" width="4" height="5.87936" fill="#333">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
  </svg>
    <script>
      window.onload = function(){
        var svg=document.getElementById('Layer_Svg')
        svg.style.display='none'
      }

    </script>
    <style>
     #Layer_Svg{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -60px
      }
    </style>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
回答
編輯回答
遺莣

不要直接放在頁面里面，可以用<iframe src="#">引入，這個我剛剛測試過是可以的，也可以用背景插入，你可以試試

2018年1月26日 11:31