Pace เว็บไซต์สร้าง Ajax Loader เพื่อแสดงสถานะ Loading เว็บไซต์แบบง่ายสุด ๆ

ผมค้นไปค้นมา ก็เจอโปรเจคบน Git Hub ของคุณ TrevorBurnham ซึ่งทำตัวช่วยสร้าง Ajax Loader แบบคลิ๊กเลือกสี เลือกไอคอน แทรกโค้ด อัพโหลดขึ้น server .. จบ ไม่ต้อง config ค่าอะไร มัน detect ให้เองโดยอัตโนมัติครับ

วิธีการแทรกโค้ด

(1) ไปที่ http://github.hubspot.com/pace/docs/welcome/

(2) สกอลลงไปจนเจอคำว่า PACE.JS ในกรอบสีฟ้า ให้คลิ๊ก ก็จะแสดงโค้ด pace.min.js บนบราวเซอร์

(3) ให้คัดลอกโค้ด pace.min.js ไปไว้ในไฟล์ .js ที่คุณมีอยู่ หรือ จะสร้างไฟล์ .js ขึ้นใหม่ และสามารถตั้งชื่อไฟล์ใหม่เองได้ เช่น loader.js ⁽¹⁾

(2) สกอลลงไปจนเจอคำว่า Theme แตะตรงแถบสีใต้คำว่า Theme เพื่อเลือกสีที่คุณต้องการตามชอบ

(3) ถัดมาจากส่วนของ Theme คือ รูปแบบไอคอน ซึ่งมีหลายแบบ โดยแสดงตัวอย่างเป็นสีที่เราเลือกในข้อ 2 ให้เสร็จสรรพ

(4) ชอบอันไหน ก็คลิ๊กคำว่า Download ก็จะแสดงโค้ด CSS ขึ้นมา ก็คัดลอกไปต่อไว้ในไฟล์ .css ของเราเอง หรือ จะสร้างไฟล์ .css ขึ้นใหม่ แล้วตั้งชื่อใหม่ได้ตามต้องการ เช่น loader.css ⁽²⁾

(5) ให้แทรกโค้ดต่อไปนี้ลงไปในระหว่างแทค

..

ของไฟล์นั้น ๆ ที่ต้องการ เช่น index.html

< !doctype html > ⁽³⁾

< head >

       < script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" >< /script > ⁽⁴⁾

      < script src="loader.js" type="text/javascript" >< /script >

      < link type="text/css" rel="stylesheet" href="loader.css" />

< /head >

 

(6) บันทึก และ อัพโหลด 3 ไฟล์ คือ ไฟล์เพจที่เราต้องการให้แสดง Ajax Loader , ไฟล์ .css และ ไฟล์ .jss

(7) ลองเปิดเพจนั้นดู จะเห็นไอคอนสถานะว่า เว็บเพจเรากำลังโหลดไฟล์อยู่ แสดงตรงกลางหน้าจอเลยครับ (แนะนำให้เลือกแบบที่แสดงเปอร์เซ็นต์ จะดีกว่าแบบหมุน ๆ เฉย ๆ เพราะผู้ใช้จะไม่รู้ว่า ต้องรออีกนานไหม)

หมายเหตุ

(1) ถ้าคัดลอกโค้ด js ไปไว้ในไฟล์ js เดิม ไม่ต้องมีแทค < script > .. < /script > นะครับ แต่ถ้าต้องการฝังไว้ในส่วน

..

ก็ต้องมีแทค < script > เปิด และ ปิดด้วยแทค < /script > นะครับ

(2) เช่นเดียวกับข้อ 1 ครับ ไม่ต้องมีแทค < style > .. < /style > นะครับ แต่ถ้าต้องการฝังไว้ในส่วน

..

ก็ต้องมีแทค < style > เปิด และ ปิดด้วยแทค < /style > นะครับ

(3) ต้องกำหนดแบบ html5 เท่านั้นนะครับ โค้ดถึงจะแสดง

(4) เป็นการขอยืมใช้ไฟล์ jquery จาก server ของ google ที่เปิดให้นักพัฒนาทั่วโลก ดึงไปใช้ฟรี ผ่านลิงค์นะครับ

ประวัติผู้พัฒนาโค้ด PACE.JS

Trevor Burnham Cambridge, MA
https://github.com/TrevorBurnham