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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
jquery css loading

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery css loading

ดูแล้ว 19,343 ครั้ง


เนื้อหาบทความนี้ เป็นการประยุกต์ใช้งาน 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>
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: loading css jquery







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ