เขียน 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,
มิถุนายน 24, 2007 @ 12:14 pm
ผมยังไม่ได้ลองนะครับ อย่างนี้ ถ้ารูปใหญ่ๆ เวลาโหลด รูปมันค่อยๆ มาจากข้างบน ในขณะที่รูปหมุนๆ preload ก็หมุนๆ อยู่ตรงกลาง หรือเปล่าครับ (นึกภาพออกไหม)
jennessa said,
มิถุนายน 24, 2007 @ 10:11 pm
ขอบคุณมากค่ะ ความรู้ใหม่อีกแล้ว
AnGiKo said,
มิถุนายน 25, 2007 @ 3:53 pm
ขอบคุณมากนะค่ะ…ที่มีความรู้ให้ตลอด ^-^ สู้ ๆ นะค่ะ
likhi1 said,
มิถุนายน 26, 2007 @ 4:45 pm
ไว้ใช้กับรอโหลด vdo น่าจะได้มั้ง….!!!!
adkdev said,
กรกฎาคม 24, 2007 @ 7:15 pm
figaro said,
กันยายน 14, 2008 @ 12:00 am
อยากโหลดลอง search : AJAX Indicators
squallcope said,
ธันวาคม 15, 2008 @ 4:18 pm
เจ๋งมากพี่ ผมหาวิธีทำอยู่เลย ขอบคุณก้าบบบบ
โหลดเพลง mp3 said,
ธันวาคม 6, 2009 @ 1:28 pm
Thank you for good information
ดาวน์โหลดเพลงใหม่ฟรี said,
ธันวาคม 6, 2009 @ 1:29 pm
แบบนี้ต้องลองครับ