0

我有一个本地 HTML 文件，其中包含一个大型 SVG 节点。如果我打开这个文件，它会在浏览器中呈现 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 节点之前是不可见的。

帮助表示赞赏！

4

1 回答 1

0

在加载 svg 之前触发bodyonload事件，这就是为什么页面加载时看不到动画的原因。您需要在 svg 的onload事件中添加 #content <-> #loading 切换：

<body>
  <div id="content">
  ...
    <svg onload="$('#content').css('display','block');$('#loading').css('display','none');"> .... </svg>
  ...
  </div>
  <div id="loading">&nbsp;</div>
</body>
于 2012-09-21T18:22:33.757 回答