Javascript 渲染大型本地文件时显示动画_Javascript_Html_Loading_Large Files

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

javascript html

Javascript 渲染大型本地文件时显示动画,javascript,html,loading,large-files,Javascript,Html,Loading,Large Files,我有一个本地HTML文件，其中包含一个大型SVG节点。如果我打开这个文件，它会在浏览器中呈现SVG文件，这需要一些时间（由于过滤器）。由于浏览器的限制，我无法通过从文件中加载SVG节点来外包SVG节点。有没有一种方法可以在整个页面上覆盖一个动画，从我启动浏览器到SVG内容被呈现出来都是可见的不起作用的是： ... <head> <style type="text/css"> #content { display: none; } &

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

谢谢你的帮助

加载svg之前会触发body

onload

事件，这就是页面加载时看不到动画的原因。您需要在svg的

onload

事件中添加#content#load切换：

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


...
.... 
...

Sencha实验室似乎有一个svg元素的afterrender事件。我知道的不多，但也许这是你的起点。