เขียน class preload
สำหรับเว็บแกลลอรี่ ที่มีรูปภาพใหญ่ๆ กว่าคนที่เข้ามาจะได้ดูรูปอาจใช้เวลาโหลดนาน เราจะมาเขียน คลาสให้มี ตัวโหลดรูป เหมือน ที่ ajax เค้าใช้กัน แต่เราจะใช้ css อย่างง่ายๆ นี่แหละั
.preload{ background: url(loading.gif) no-repeat 50% 50%; }
คลาส preload จะมี แบ็คกราวน์ อยู่ตรงกลางที่ โดยเราใส่ 50% นั่นคือเลื่อนตามแนวแกน x และ y ตามความกว้างสูง ของรูป การนำไปใช้ใส่ คลาสที่ img เช่น
<img src=”test.jpg” class=”preload”>
ส่วนรูปที่จะใช้ เราทำ gif ง่ายๆ เองก็ได้ ผมมีเก็บไว้ 2 รูป ไม่รู้ที่ไหนมีให้โหลดบ้าง อยากได้อยู่เหมือนกัน หาแล้วก็ไม่เจอ ใครมีก็เอามาแจกกันมั่งนะ 
อันนี้ใส่ bg สีดำ ไว้ไม่งั้นไม่เห็น คลิกขวาเซฟเอาละกันนะ
ตัวอย่าง รูปที่ใช้ preload1.html ถ้าดูไม่ทัน กด Ctrl+f5 ละกันครับ มันจะได้โหลดรูปใหม่
iake said,
June 24, 2007 @ 12:14 pm
ผมยังไม่ได้ลองนะครับ อย่างนี้ ถ้ารูปใหญ่ๆ เวลาโหลด รูปมันค่อยๆ มาจากข้างบน ในขณะที่รูปหมุนๆ preload ก็หมุนๆ อยู่ตรงกลาง หรือเปล่าครับ (นึกภาพออกไหม)
jennessa said,
June 24, 2007 @ 10:11 pm
ขอบคุณมากค่ะ ความรู้ใหม่อีกแล้ว
AnGiKo said,
June 25, 2007 @ 3:53 pm
ขอบคุณมากนะค่ะ…ที่มีความรู้ให้ตลอด ^-^ สู้ ๆ นะค่ะ
likhi1 said,
June 26, 2007 @ 4:45 pm
ไว้ใช้กับรอโหลด vdo น่าจะได้มั้ง….!!!!
adkdev said,
July 24, 2007 @ 7:15 pm
figaro said,
September 14, 2008 @ 12:00 am
อยากโหลดลอง search : AJAX Indicators
แวะมา said,
October 24, 2008 @ 5:20 pm
ทำเองเลยละกัน icon preload
ที่นี่เลยครับพี่น้อง http://www.ajaxload.info/#preview