แสดงรูประหว่างรอโหลดเพจ

การแสดงรูปรอโหลด สำหรับการทำ pre load page สามารถเปลี่ยนรูปได้ ที่ preload.gif การแสดงรูปรอโหลดในลักษณะนี้ เหมาะกับเพจที่เป็นข้อความมากกว่ารูปภาพนะครับ เนื่องจากมันจะรอเฉพาะส่วนที่เป็นข้อความเท่านั้น

<!--แสดงโค้ดนี้ส่วนหัวของหน้า-->
<div id="waitDiv" style="position:absolute;visibility:hidden"><img id="waitIMG" src="preload.gif"></div>
<script type="text/javascript">
function windowwidth() {
  if (navigator.userAgent.indexOf("MSIE") > 0) w=document.body.clientWidth;
  else w=window.outerWidth;
  return w;
}
function windowheight() {
  if (navigator.userAgent.indexOf("MSIE") > 0) h=document.body.clientHeight;
  else h= window.outerHeight;
  return h;
}
var DHTML = (document.getElementById || document.all || document.layers);
if (DHTML) {
  var obj=document.getElementById("waitDiv");
  obj.style.left=(windowwidth()-waitIMG.width)/2;
  obj.style.top=(windowheight()-waitIMG.height)/2;
}
function ap_getObj(name) {
  if (document.getElementById) {
    return document.getElementById(name).style;
  } else if (document.all) {
    return document.all[name].style;
  } else if (document.layers) {
    return document.layers[name];
  }
}
function ap_showWaitMessage(div, flag) {
  if (!DHTML) return;
  var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
}

ap_showWaitMessage('waitDiv', 1); //แสดงในครั้งแรก
</script>

<html>
<head>
<title></title>
</head>
<body onload="ap_showWaitMessage('waitDiv', 0);">
<!--แสดงเนื้อหาตามปกติ-->
</body>
</html>

สำหรับเนื้อหาของเพจ ก็แทรกไว้ในส่วนของ <body>...</body> ตามปกติ
ผู้เขียน goragod โพสต์เมื่อ 31 มี.ค. 2551 เปิดดู 9,694 ป้ายกำกับ HTMLJavascript
^