GORAGOD.com

ในความเป็นจริงแล้ว AJAX ทำ Loading ได้ไม่ยากหรอกครับ เพราะว่าสถานะการณ์มันเอื้ออำนวยอยู่แล้ว สามารถทำได้ด้วยโค้ดไม่กี่บรรทัดครับ

เริ่มต้นที่เมื่อเราทำการเรียกใช้ AJAX ก็ให้ไปกำหนดให้พื้นที่แสดงผลแทนรูปรอโหลด จนกระทั่ง AJAX ทำงานเสร็จ ข้อมูลถูกส่งกลับมาเรียบร้อยก็ให้ไปแสดงผลข้อมูลแทนแค่นั้นเอง

<style>
#wait {
  position:absolute;
  left:50%;
  top:50%;
  color:navy;
  text-align:center;
  width:100px;
}
</style>

กำหนด style ให้รูปรอโหลดแสดงกลางพื้นที่แสดงผล

<div id=content></div>

พื้นที่แสดงผลข้อมูลครับ ส่วนนี้จะเป็นส่วนที่เมื่อทำการประมวลผล AJAX เสร็จแล้วจะมาแสดงผลที่นี่

function loaddoc(id) {
  //แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
  document.getElementById("content").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';
  req.onreadystatechange = function () {
    if (req.readyState==4) {
      if (req.status==200) {
        var data=req.responseText; //รับค่ากลับมา
        document.getElementById("content").innerHTML=data; //แสดงผล แทนรูปรอโหลด
      }
    }
  };
  req.open("GET", "index.php?id="+id, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
  req.send(null); //ส่งค่า
}

loaddoc เป็นฟังก์ชั่นที่เรียกใช้ AJAX จะเห็นว่าเมื่อเรียกใช้ AJAX ในทันที พื้นที่แสดงผลจะแสดงรูปรอโหลดก่อน จนกระทั่ง AJAX ประมวลผลเสร็จก็จะเอาข้อความมาแสดงที่พื้นที่แสดงผลแทน

การใช้งาน เราจะทำเมนูเพื่อเรียกฟังก์ชั่น loaddoc ให้ทำงานขณะที่เราเรียกเพจ เช่น

<a href="javascript:loaddoc('gallary.php')">Gallary</a>

ซึ่งเมื่อคลิกลิงค์ Gallary ก็จะไปเรียก loaddoc เพื่อเรียกหน้า gallary.php มาแสดง 

รูปรอโหลดก็หาเอาตามใจชอบครับ ลองดูได้ ที่นี่

ตัวอย่าง การแสดงรูปรอโหลด ถ้าดูไม่ทันให้คลิกที่เมนูด้านบนนะครับ