รู้เบื้องต้นเกี่ยวกับ CSS สไปรท์
โดยทั่วไปจะแปลว่า "การต่อภาพ CSS" หรือ "การวางตำแหน่งพื้นผิว CSS" CSS Sprites ไม่ใช่เทคโนโลยีใหม่ แต่มีการพัฒนาค่อนข้างมากในการพัฒนาเว็บไซต์ คุณสามารถพบเงาของ CSS Sprites ได้ทุกที่ในหน้าเว็บของบริษัทในเครือของ Alibaba แต่ CSS Sprites ไม่ใช่กฎทอง แต่ในหลายกรณี CSS Sprites มีข้อดีบางประการคือสามารถลดภาระบนเซิร์ฟเวอร์และปรับปรุงความเร็วในการโหลดหน้าเว็บได้ ในขณะที่การออกแบบเว็บไซต์พัฒนาไปในทิศทางที่ซับซ้อนและชาญฉลาดมากขึ้น นักออกแบบก็เริ่มพิจารณาใช้วิธีการที่ไม่ใช่จาวาสคริปต์เพื่อสร้างเอฟเฟกต์เมนูเมาส์โอเวอร์และโฮเวอร์ ในเวลานี้ CSS Sprite เกิดขึ้น
พูดตรงๆ ก็คือ CSS Sprites ได้รวมภาพพื้นหลังบางภาพในหน้าเว็บลงในไฟล์ภาพ จากนั้นจึงใช้ CSS "พื้นหลัง-ภาพ", "พื้นหลังซ้ำ" และ "ตำแหน่งพื้นหลัง" เพื่อวางตำแหน่งพื้นหลัง ตำแหน่งสามารถใช้ตัวเลขเพื่อค้นหาตำแหน่งของภาพพื้นหลังได้อย่างแม่นยำ
เมื่อโหลดหน้า แทนที่จะโหลดแต่ละภาพ รูปภาพที่รวมทั้งหมดจะถูกโหลดพร้อมกัน นี่เป็นการปรับปรุงที่ยอดเยี่ยม โดยจะลดจำนวนคำขอ HTTP ลงอย่างมาก ลดแรงกดดันของเซิร์ฟเวอร์ และลดระยะเวลาหน่วงที่ต้องใช้ในการโหลดรูปภาพเมื่อวางเมาส์เหนือ ทำให้เอฟเฟกต์ราบรื่นขึ้นและไม่มีการหยุดชั่วคราว
บทความที่เกี่ยวข้องกับ CSS Sprites
แอปพลิเคชัน CSS Sprites
ในเรื่องนี้ Taobao ทำได้ดีกว่า ขอเอา Taobao เป็นตัวอย่าง
ตัวอย่างที่ 1: การนำทางหน้าช่อง Taobao
การแสดงผล:
แผนภาพสไปรท์:
