0
ウェブページ上に、私がpChartを使って作成しているチャートがあり、生成に時間がかかります。Javascript：グラフ作成中にアニメーション化された（読み込み中の）gifを表示する方法
ページの読み込みを適切な時間内に行うために、これらのグラフの代わりに「Chart XYZをロードするにはここをクリックしてください」というテキストがある写真（pChartで生成されたもの） 。
私の問題は、ユーザーが画像をクリックすると、divがゼロに縮まり、それによって他のdivの位置が変わるということです。だから私は、生成されている間、チャートの代わりにローディング（アニメーション）gifを表示することを考えています。これはまた、クリック後にチャートが生成されていることを視覚的に示し、divが縮小しないようにします。
ここで私は、これまで使用しているコードです：
<head>
<script>
function myFunction(where){
var content = '<img style="some style" src="chart.php">';
document.getElementById(where).innerHTML = content;
}
</script>
</head>
<body>
<div id="id1" style="some style">
<img style="some style" src="click-to-load.php" onclick="myFunction('id1')">
</div>
</body>
を上記の作品、私が説明してきたように：divが収縮して、ユーザーが何かがで起こっていることを、他の視覚的な表示を持っていないが、バックグラウンドが表示され、最終的にクリックの結果として何かが表示されます。
gclを表示するにはonclickイベントを変更します（jpegイメージだけです）。そして、準備が整ったら、読み込み中のgifを表示しますか？
OK、最後の部分はどうすればよいですか？gifを実際のチャート（phpファイルで生成されたJPEG画像）に置き換えますか？ –
私はあなたのプロジェクトのコンテキストを知らないが、これはPHPの質問のように思える。サーバーからフルページを再配信しますか？その場合は、![]()
要素を変更してください。 AJAXを使ってページの一部だけをリフレッシュしていますか？その部分がどこにあるのかをサーバーファイルに伝えます。 –
Arampg
どちらもありません。私は別の![]()
とdivのinnerHTMLを変更するHTMLのヘッダー部分に記載されているスクリプトを実行するonclickプロパティを使用しています。 –