เขียน class preload
Jun 23rd
สำหรับเว็บแกลลอรี่ ที่มีรูปภาพใหญ่ๆ กว่าคนที่เข้ามาจะได้ดูรูปอาจใช้เวลาโหลดนาน เราจะมาเขียน คลาสให้มี ตัวโหลดรูป เหมือน ที่ 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 ละกันครับ มันจะได้โหลดรูปใหม่
ผมยังไม่ได้ลองนะครับ อย่างนี้ ถ้ารูปใหญ่ๆ เวลาโหลด รูปมันค่อยๆ มาจากข้างบน ในขณะที่รูปหมุนๆ preload ก็หมุนๆ อยู่ตรงกลาง หรือเปล่าครับ (นึกภาพออกไหม)
ขอบคุณมากค่ะ ความรู้ใหม่อีกแล้ว
ขอบคุณมากนะค่ะ…ที่มีความรู้ให้ตลอด ^-^ สู้ ๆ นะค่ะ
ไว้ใช้กับรอโหลด vdo น่าจะได้มั้ง….!!!!
อยากโหลดลอง search : AJAX Indicators
เจ๋งมากพี่ ผมหาวิธีทำอยู่เลย ขอบคุณก้าบบบบ
Thank you for good information
แบบนี้ต้องลองครับ