0

大きな 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>

ロード アニメーションは Web ページのロードからは見えず、SVG ノードがロードされる前には見えないためです。

助けていただければ幸いです。

4

1 に答える 1

0

SVG が読み込まれる前にbodyonloadイベントがトリガーされるため、ページの読み込み時にアニメーションが表示されません。onload代わりに、svg のイベントに#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 に答える