เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ
27 August 2010การสร้าง 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3471 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4892 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6007 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8967 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4513 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2387 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 2144 15 Oct 08 การสร้างข้อความแจ้งเตือนด้วย CSS อ่าน 3771 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2750 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4616 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 6854 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย อ่าน 6994 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1813 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4707 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 1705 10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 3256 22 Oct 10 สร้าง php ฟังก์ชัน ค้นหาค่าในตัวแปร array อย่างง่าย อ่าน 1428 29 Mar 10 สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map อ่าน 6662 14 Feb 09 ข้อแตกต่างระหว่าง mysql_pconnect กับ mysql_connect อ่าน 2711 18 Dec 09 สร้างไฟล์ word จาก html ด้วย php class ได้อย่างง่าย อ่าน 1959