私はこれを行います:
まず、非表示のdivがあり、その中にロードがあり、ロードボタンがあります:
<div id="displayDiv" style="display: none">
<img id="loadingGif" src="loadingGif" style="display:none"; />
<div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />
次に、JSコードがあります(私はjQueryを使用しています)
<script type="text/javascript">
$(document).ready( onDocumentReady); // this runs before page load
function onDocumentReady()
{
$('#loadButton').click( onLoadClick ); //assign action on button click
}
function onLoadClick()
{
$('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
$('#actualContent').hide(); // hide the actual content of the response;
$('#displayDiv').show(); // display the div
$.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
//so as long as the content loads, the loading gif will show;
}
function onRequestComplete( data )
{
$('#loadingGif').hide();
$('#actualContent').html( data );
$('#actualContent').show();
}
</script>
そう。コンテナ「displayDiv」があります。内部には、画像「loadingGIf」と別のコンテナ「actualContent」があります。ロードボタンをクリックすると、読み込み中のgifが入った大きなコンテナが表示され、何かが読み込まれていることをユーザーに通知します。コンテンツが読み込まれると、loadingGifを非表示にして、「actualContent」gifに情報を表示します。 test.phpでは、divに表示する必要があるものをエコーするだけです。 JSONの使用をお勧めしますが、詳細についてはこちらをご覧ください。
これがお役に立てば幸いです。