เนื้อหาบทความนี้ เป็นการประยุกต์ใช้งาน css ร่วมกับ jquery
เพื่อแสดง ข้อความ loading สำหรับหน้าเพจ ที่ใช้เวลาในการโหลดนาน
หรือ จะประยุกต์ใช้กับกรณีอื่นๆ ก็ได้ เช่น แสดง logo ของ เว็บไซต์
ก่อนเพจจะทำการโหลดเสร็จ เป็นต้น
การใช้งาน จะมี div อยู่สองอัน
ตัวแรก อยู่ถัดจากแท็ก body
<div id="overlay"></div>
โดยจะเป็นตัวที่คลุมด้านบนเนื้อหา แบบซ้อนทับ หรือ layer วางด้านบน
ก่อนที่จะมีการแสดง รายละเอียดเพจทั้งหมด โดยในตัวอย่างจะใช้
รูปเป็นพื้นหลัง แทนข้อความ
ตาม css ด้านล่าง
#overlay {
position: absolute;
top: 0px;
left: 0px;
background: #ccc;
width: 100%;
height: 100%;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: .75;
z-index: 999;
background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
}
ตัวที่สอง จะมี div.main-contain
จะจัดให้อยู่ถัดจาก แท็ก div แรก
แต่ตัวนี้ เราจะใช้คลุมเนื้อหาแบบครอบ
แท็กปิด </div> ก็จะอยู่ส่วนท้ายของ เนื้อหาที่แสดง
.main-contain{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
เหตุผลที่ใช้ แท็ก div ตัวที่สองนี้ เนื่องจาก div ตัวแรก จะคลุมได้เฉพาะ
ส่วนของเนื้อหา ตามความสูง ของหน้าต่างบราวเซอร์ ที่แสดงขณะนั้น
แต่ไม่ใช้ความสูงทั้งหมดของเนื้อหา ดังนั้น ถ้าผู้ใช้เลื่อน scrollbar ลงมา
ก็จะพบว่า ตัว div แรกไม่ได้คลุมทั้งหมด
เราจะใช้ div ที่สองนี้ จำกัดความสูงของเนื้อหา ในครั้งโหลดตอนแรก ให้แสดง
ตามความสูงของบราวเซอร์ และไม่สามารถ scroll เลือนลงมาได้ โดยใช้
คำสั่ง overflow: hidden; ใน css
และเมื่อข้อมูลโหลดเสร็จเรียบร้อยแล้ว เราก็จะสั่งให้
div ตัวแรก หายไปแบบ fade ค่อยๆ จางหาย
สำหรับ div ตัวที่สอง เราก็ให้เอา class ที่จำกัดความสูงของเนื้อหาออก
เท่านี้ข้อมูล ก็จะแสดงทั้งหมด
ตัวอย่างโค้ด test_loading.php
สามารถทดสอบโดยลองเพิ่ม จากค่า 1000 เป็น 10000 เพื่อดูผลได้
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css" />
<style type="text/css">
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
background: #ccc;
width: 100%;
height: 100%;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: .75;
z-index: 999;
background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
}
.main-contain{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="main-contain">
<table class="table table-striped">
<tr>
<th>#</th>
<th>Topic</th>
<th>Date</th>
<th>View</th>
</tr>
<?php for($i=1;$i<=1000;$i++){?>
<tr>
<td><?=$i?></td>
<td>topic <?=$i?></td>
<td>Date <?=$i?></td>
<td>View <?=$i?></td>
</tr>
<?php } ?>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#overlay").fadeOut();
$(".main-contain").removeClass("main-contain");
});
</script>
</body>
</html>
