在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

在頁(yè)面還未加載完畢前，svg的動(dòng)畫效果失效？

現(xiàn)在在做一個(gè)vue-cli的項(xiàng)目，因?yàn)轫?yè)面較多首屏加載有點(diǎn)慢，為了提高用戶的體驗(yàn)所以在vue-cli首屏加載的時(shí)候加一個(gè)svg的loading圖片，我是直接加在了index.html中，在頁(yè)面未加載完畢時(shí)顯示，加載完畢消失，現(xiàn)在碰到個(gè)問(wèn)題就是這個(gè)svg在頁(yè)面還未完全加載完畢時(shí)并不會(huì)顯示動(dòng)畫效果，只會(huì)是一個(gè)靜態(tài)的圖片，這個(gè)如何解決
下面是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>
回答
編輯回答
遺莣

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

2018年1月26日 11:31