A-AA+then

สอบถาม วิธีทำแสดงรูประหว่างรอโหลดเพจ

2,399
สอบถาม วิธีทำแสดงรูประหว่างรอโหลดเพจ  พอเอาโค๊ดมา  ใส่แล้ว มันอสดงนะค่ะ
แต่มันทำให้ โครงหน้าเว็บเสียไปเลยค่ะ  ฟ้อนcss ต่างๆ เปลี่ยนไปเลยค่ะ


<div id="waitDiv" style="position:absolute;visibility:hidden"><img id="waitIMG" src="images/ajax-loader.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>


<body onload="ap_showWaitMessage('waitDiv', 0);">

3 ความคิดเห็น

ลองย้ายไปใส่ส่วนอื่นๆของเพจดูครับ...

อาจเป็นเพราะโครงสร้างของเว็บเป็น XHTML พอมี tag ส่วนเกินหลงมาก็เลยทำให้หน้าเว็บเพี้ยน

ถ้าไม่สามารถย้ายไปส่วนอื่นๆแล้วแสดงผลได้ถูกต้อง อาจต้องปรับเปลี่ยนเพจให้เป็นแค่ HTML ธรรมดาครับ เนื่องจากโค้ดถูกออกแบบมาสำหรับ HTML เท่านั้นครับ
1

ถ้าเปลี่ยนเปนสคริปแบบนี้ได้มั้ยค่ะ
<script type="text/javascript">
document.write('<div id="loading" style="text-align:center; padding:350px 0"><img src="images/ajax-loader.gif">
<br><font color="#FFFFFF">please wait loading...</font></div>');
window.onload=function(){
document.getElementById("loading").style.display="none";
}
</script>


แต่จะหน่วงเวลา สามารถเขียนเพิ่มเติมสคริปนี้ได้มั้ยค่ะ
2

อ้างจากคำตอบที่ #2ถ้าเปลี่ยนเปนสคริปแบบนี้ได้มั้ยค่ะ
<script type="text/javascript">
document.write('<div id="loading" style="text-align:center; padding:350px 0"><img src="images/ajax-loader.gif">
<br><font color="#FFFFFF">please wait loading...</font></div>');
window.onload=function(){
document.getElementById("loading").style.display="none";
}
</script>


แต่จะหน่วงเวลา สามารถเขียนเพิ่มเติมสคริปนี้ได้มั้ยค่ะ

คำตอบที่ดีที่สุด ก็คือ ลองดูสิครับ...

วิธีการที่ถูกต้อง ก็มีแค่...
1.แสดง loading ทันทีเมื่อเรียกหน้าเพจ ก่อนโหลดส่วนอื่นๆ นั่นหมายความว่ามันควรจะอยู่บนสุดของเพจ
2..ใช้ javascript เพื่อจัดการตำแหน่งของ loading ให้อยู่กลางจอ
3.ซ่อน loading หลังจากโหลดหน้าเว็บเรียบร้อย ด้วย body.onload

ปัญหาอาจเกิดขึ้นได้อันเนื่องมาจากองค์ประกอบของแต่ละเว็บที่ไม่เหมืือนกัน ดังนั้นเราอาจต้องดัดแปลงหรือแก้ไขเพื่อให้มันเข้ากับสิ่งที่เรามี และการทดลองทำ เป็นเพียงอย่างเดียวที่เราควรทำครับ และเมื่อเกิดปัญหา ให้เราลองคิดแก้ไขปัญหาต่อไปในที่สุดจะสำเร็จ
3
^