PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

27 August 2010 By
preloading image jquery preloading page


การสร้าง 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>

 







Tags:: preloading page preloading image jquery






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


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