การสร้าง preloading page หรือ loading image ในที่นี้ จะอาศัยการโหลด รูปภาพเป็นตัวกำหนด
เงื่อนไข เนื่องจากรูปภาพ หรือ img จะเป็นส่วนที่โหลดมาแสดงท้ายสุด หลักการคือ หาจำนวนรูปในหน้าเว็บนั้นๆ ว่าโหลดเสร็จเรียบร้อยแล้วหรือไม่ ถ้าโหลดเรียบร้อยแล้ว ให้ปิด ส่วนที่เป็น preloading page หรือ loading image ไป หรือกรณีทีรูปเกิดความผิดพลาดในการโหลด จากสาเหตุใดๆ ก็ตาม ให้ทำการปิด preloading page หรือ loading image ไปได้เลย
* การทดสอบที่เครื่อง หรือ ใช้ internet ความเร็วสูง หรือการโหลดหน้าเว็บนั้นเป็นครั้งที่สอง การโหลดหน้าเว็บจะเร็วกว่าเดิม เมื่อมีการ cache รูปภาพ ดังนั้น preloading page หรือ loading image อาจจะไม่แสดง
ตัวอย่าง
https://www.ninenik.com/demo/pre_loading_status.php คลิกที่ลิ้งค์ที่ชื่อ Load Again เพื่อทดสอบหลายๆ ครั้ง
เริ่มต้นการสร้าง preloading page หรือ loading image
1. กำหนด css ที่จำเป็นตังนี้
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
/* กำหนด css ของส่วนที่ใช้เป็น loading */
div#loadPage{
position:fixed;
margin:auto;
left:0;
top:0;
width:100%;
height:100%;
color:#FFF;
background-color:#000;
z-index:500;
text-align:center;
}
</style>
2. กำหนดรูปแบบของ ส่วน loading สามารถแทรกรูปภาพ หรือ กำหนดเป็นตัวอักษร ตามต้องการ โดยแทรกไว้ต่อจากแท็ก <body>
<body> <div id="loadPage"> <br /> <br /> <br /> Loding.......... </div> ..... ... เนือหาของเว็บไซต์
3. ส่วนของ Javascript Code
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var imgLength=$("img").length; // หาจำนวนรูปทั้งหมด
var countImg=0; // สำหรับนับจำนวนรูปภาพที่โหลดแล้ว
$("img").each(function(){
var IndexID=$("img").index(this); // สำหรับทดสอบ ลบออกได้
$(this).load(function(){
countImg++;
$("#loadPage").append("<br>loaded img "+IndexID); // สำหรับทดสอบ ลบออกได้
console.log("loaded img "+IndexID); // สำหรับทดสอบ ลบออกได้
if(countImg==imgLength){ // เมื่อโหลดรูปทั้งหมดแล้วปิดตัว loading
$("#loadPage").hide();
}
});
// เมื่อเกิดข้อผิดพลาดในการโหลดให้ปิด loading เลย
$(this).error(function(){
$("#loadPage").hide();
});
});
});
</script>
