PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง ข้อความ loading ก่อน แสดงหน้าเพจ ทั้งหมด ด้วย jquery และ css

20 August 2014 By


เนื้อหาบทความนี้ เป็นการประยุกต์ใช้งาน 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>
 
ตัวอย่าง http://www.ninenik.com/demo/test_loading.php

Tags:: loading css jquery





URL สำหรับอ้างอิง