极客观点
项目管理
HarmonyOS
现在在做一个vue-cli的项目，因为页面较多首屏加载有点慢，为了提高用户的体验所以在vue-cli首屏加载的时候加一个svg的loading图片，我是直接加在了index.html中，在页面未加载完毕时显示，加载完毕消失，现在碰到个问题就是这个svg在页面还未完全加载完毕时并不会显示动画效果，只会是一个静态的图片，这个如何解决
下面是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="#">引入，这个我刚刚测试过是可以的，也可以用背景插入，你可以试试