เขียน 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 posts

7 Comments »

  1. iake said,

    June 24, 2007 @ 12:14 pm

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

  2. jennessa said,

    June 24, 2007 @ 10:11 pm

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

  3. AnGiKo said,

    June 25, 2007 @ 3:53 pm

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

  4. likhi1 said,

    June 26, 2007 @ 4:45 pm

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

    :d:d:d

  5. adkdev said,

    July 24, 2007 @ 7:15 pm

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

  6. figaro said,

    September 14, 2008 @ 12:00 am

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

  7. แวะมา said,

    October 24, 2008 @ 5:20 pm

    ทำเองเลยละกัน icon preload
    ที่นี่เลยครับพี่น้อง http://www.ajaxload.info/#preview

RSS feed for comments on this post · TrackBack URI

Leave a Comment

:) :( :d :"> :(( \:d/ :x 8-| /:) :o :-? :-" :-w ;) [-( :)>- more »

email

จัดส่งถึงที่ โดย

ลิ้งค์สำหรับ rss reader

advertise
advertise
ติดต่อ cssmaster@divland.com
IDOL Beautifulidol.com WAZCOOL Wazcool.com ASTORE Astoreblog.com
MUSIC Hfonemusic.com POST Postigg.com LOAD uploadtoday.com