เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
preloading image preloading page jquery

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



การสร้าง preloading page หรือ loading image ในที่นี้ จะอาศัยการโหลด รูปภาพเป็นตัวกำหนด
เงื่อนไข เนื่องจากรูปภาพ หรือ img จะเป็นส่วนที่โหลดมาแสดงท้ายสุด หลักการคือ หาจำนวนรูปในหน้าเว็บนั้นๆ ว่าโหลดเสร็จเรียบร้อยแล้วหรือไม่ ถ้าโหลดเรียบร้อยแล้ว ให้ปิด  ส่วนที่เป็น preloading page หรือ loading image ไป หรือกรณีทีรูปเกิดความผิดพลาดในการโหลด จากสาเหตุใดๆ ก็ตาม ให้ทำการปิด  preloading page หรือ loading image ไปได้เลย

* การทดสอบที่เครื่อง  หรือ ใช้ internet ความเร็วสูง หรือการโหลดหน้าเว็บนั้นเป็นครั้งที่สอง  การโหลดหน้าเว็บจะเร็วกว่าเดิม เมื่อมีการ cache รูปภาพ ดังนั้น preloading page หรือ loading image อาจจะไม่แสดง

 ตัวอย่าง

http://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>

 



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











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











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