0

実行に時間がかかる以下のコードがある場合 (約 4 ～ 5 秒)。クエリが実行されていない場合、読み込み中のグラフィックを表示する、そうでない場合はクエリ結果を表示するなど、クエリを実行する前に読み込み中の画像を表示するにはどうすればよいですか。

index.php

<html>
<head>
<script>
function showDate() {

    var str=document.getElementById("mymonth").value;
    var str1=document.getElementById("myyear").value;
  if(str == '' || str1 == ''){
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function() {
                    if (this.readyState==4 && this.status==200) {
                        document.getElementById("txtHint").innerHTML=this.responseText;
                    }
                }
                xmlhttp.open("GET","getdate.php?selectedmonth="+str+"&selectedyear="+str1,true);
                xmlhttp.send();
            }

</script>
</head>
<body>
<form>
            <select name="mymonth" id="mymonth" onchange="showDate()">
 <option value="">Select Month</option>
      <option value="01">January</option>
      <option value="02">February</option>
      <option value="03">Mac</option>
      <option value="04">April</option>
      <option value="05">Mei</option>
      <option value="06">June</option>
      <option value="07">July</option>
      <option value="08">August</option>
      <option value="09">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
      </select>
<select name="myyear" id="myyear" onchange="showDate()">
                <option value="">Select Year</option>
                <option value="2016">2016</option>
                 <option value="2017">2017</option>
            </select>
</form>
<br>
<div id="txtHint"><b>Date group by month/year</b></div>
</body>
</html>

getdate.php

<?php
$selectedmonth = intval($_GET['selectedmonth']);
$selectedyear = intval($_GET['selectedyear']);

$month = "$selectedmonth";
$year = "$selectedyear";

$start_date = "01-".$month."-".$year;
$start_time = strtotime($start_date);

$end_time = strtotime("+1 month", $start_time);

echo "<table border='1'>";

for($i=$start_time; $i<$end_time; $i+=86400)
{
$list = date('d M Y (D)', $i);
echo "<tr><td>";
echo $list;
echo "</td>";

echo "<td>&nbsp;</td>";
echo "</tr>";
}
echo "</table>";
?>
4

1 に答える 1