Question

我有一个包含大型SVG节点的本地HTML文件。如果我打开这个文件，它会在浏览器中呈现SVG文件，这需要一些时间（由于过滤器）。我不能外包SVG节点，例如通过浏览器限制从文件加载它。有没有办法，用我从启动浏览器到呈现SVG内容时可见的动画覆盖整个页面？

什么行不通：

...
<head>
  <style type="text/css">
    #content {
      display: none;
    }
  </style>
</head>
<body onload="$('#content').css('display','block');$('#loading').css('display','none');">
  <div id="content">
  ...
    <svg> .... </svg>
  ...
  </div>
  <div id="loading">&nbsp;</div>
</body>

因为加载动画在加载网页时不可见，并且在加载SVG节点之前是不可见的。

非常感谢帮助！

Answer 1

在加载svg之前触发了body onload事件，这就是在页面加载时没有看到动画的原因。您需要添加#content＆lt; - ＆gt;在svg的onload事件中#loading toggle代替：

<body>
  <div id="content">
  ...
    <svg onload="$('#content').css('display','block');$('#loading').css('display','none');"> .... </svg>
  ...
  </div>
  <div id="loading">&nbsp;</div>
</body>

在渲染大型本地文件时显示动画

1 个答案: