สอบถาม วิธีทำแสดงรูประหว่างรอโหลดเพจ
สอบถาม วิธีทำแสดงรูประหว่างรอโหลดเพจ พอเอาโค๊ดมา ใส่แล้ว มันอสดงนะค่ะ
แต่มันทำให้ โครงหน้าเว็บเสียไปเลยค่ะ ฟ้อน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);">
แต่มันทำให้ โครงหน้าเว็บเสียไปเลยค่ะ ฟ้อน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);">
อาจเป็นเพราะโครงสร้างของเว็บเป็น XHTML พอมี tag ส่วนเกินหลงมาก็เลยทำให้หน้าเว็บเพี้ยน
ถ้าไม่สามารถย้ายไปส่วนอื่นๆแล้วแสดงผลได้ถูกต้อง อาจต้องปรับเปลี่ยนเพจให้เป็นแค่ HTML ธรรมดาครับ เนื่องจากโค้ดถูกออกแบบมาสำหรับ HTML เท่านั้นครับ
<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
ปัญหาอาจเกิดขึ้นได้อันเนื่องมาจากองค์ประกอบของแต่ละเว็บที่ไม่เหมืือนกัน ดังนั้นเราอาจต้องดัดแปลงหรือแก้ไขเพื่อให้มันเข้ากับสิ่งที่เรามี และการทดลองทำ เป็นเพียงอย่างเดียวที่เราควรทำครับ และเมื่อเกิดปัญหา ให้เราลองคิดแก้ไขปัญหาต่อไปในที่สุดจะสำเร็จ