Home > CSS techniques > เขียน class preload

เขียน 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 รูป ไม่รู้ที่ไหนมีให้โหลดบ้าง อยากได้อยู่เหมือนกัน หาแล้วก็ไม่เจอ ใครมีก็เอามาแจกกันมั่งนะ working loading อันนี้ใส่ bg สีดำ ไว้ไม่งั้นไม่เห็น คลิกขวาเซฟเอาละกันนะ

ตัวอย่าง รูปที่ใช้ preload1.html ถ้าดูไม่ทัน กด Ctrl+f5 ละกันครับ มันจะได้โหลดรูปใหม่

Related Articles

  • Share/Bookmark
Categories: CSS techniques
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. June 24th, 2007 at 12:14 | #1

    ผมยังไม่ได้ลองนะครับ อย่างนี้ ถ้ารูปใหญ่ๆ เวลาโหลด รูปมันค่อยๆ มาจากข้างบน ในขณะที่รูปหมุนๆ preload ก็หมุนๆ อยู่ตรงกลาง หรือเปล่าครับ (นึกภาพออกไหม)

  2. June 24th, 2007 at 22:11 | #2

    ขอบคุณมากค่ะ ความรู้ใหม่อีกแล้ว :)

  3. June 25th, 2007 at 15:53 | #3

    ขอบคุณมากนะค่ะ…ที่มีความรู้ให้ตลอด ^-^ สู้ ๆ นะค่ะ :)>-:)>-

  4. likhi1
    June 26th, 2007 at 16:45 | #4

    ไว้ใช้กับรอโหลด vdo น่าจะได้มั้ง….!!!!

    :d:d:d

  5. July 24th, 2007 at 19:15 | #5

    :)>- ดีครับ จะลองนำไปใช้ดูครับ :d:d

  6. figaro
    September 14th, 2008 at 00:00 | #6

    อยากโหลดลอง search : AJAX Indicators

  7. squallcope
    December 15th, 2008 at 16:18 | #7

    เจ๋งมากพี่ ผมหาวิธีทำอยู่เลย ขอบคุณก้าบบบบ

  8. December 6th, 2009 at 13:28 | #8

    Thank you for good information

  9. December 6th, 2009 at 13:29 | #9

    แบบนี้ต้องลองครับ

  1. No trackbacks yet.