การโหลดแบบขี้เกียจทำงานอย่างไร
รูปภาพ HTML ปกติมีลักษณะดังนี้:
<img src="sample.jpg" width="100%"/>ปลั๊กอินโหลดขี้เกียจเขียนโค้ดใหม่ดังนี้:
<img data-src="sample.jpg" width="100%"/>ตามที่คุณสังเกตเห็นsrcแอตทริบิวต์ถูกเปลี่ยนเป็นdata-src.
เพราะว่าไม่src, เบราว์เซอร์ไม่โหลดภาพนี้ในตอนแรก ต่อมา โค้ด JavaScript เล็กน้อยจะตรวจสอบว่ารูปภาพอยู่ในวิวพอร์ตหรือไม่ (วิวพอร์ตของผู้ใช้) และหากอยู่ภายในdata-srcกลับไปสู่สิ่งนั้นsrcเบราว์เซอร์ใดที่เรียกใช้การดาวน์โหลดและการแสดงภาพ
Native Lazy Loading คืออะไร?
Chrome มาพร้อมกับ "การโหลดเนทีฟแบบเนทีฟ" คุณสามารถอ่านเกี่ยวกับเรื่องนี้ได้ที่นี่
การโหลดแบบเนทีฟแบบ Lazy Loading มีข้อได้เปรียบที่ไม่จำเป็นต้องใช้ JavaScript และโดยทั่วไปจะเร็วกว่ามากเนื่องจากเบราว์เซอร์ดำเนินการ "แบบเนทีฟ"
รหัสมีลักษณะดังนี้:
<img src="sample.jpg" loading="lazy" width="100%"/>ภาพบินคืออะไร?
Flying Images เป็นปลั๊กอินโหลดแบบ Lazy Loading ประสิทธิภาพสูง ใช้การโหลดแบบ Lazy Loading "ดั้งเดิม" ของเบราว์เซอร์ หากมี มิฉะนั้นให้ใช้ JavaScript ปกติสำหรับการโหลดแบบ Lazy Loading
Flying Images ยังสามารถโหลดภาพได้ก่อนที่ภาพจะปรากฎในวิวพอร์ต
คุณกลัวการโหลดแบบ Lazy Loading เพราะมันทำร้ายประสบการณ์ผู้ใช้หรือไม่?
รูปภาพที่บินได้แตกต่างจากปลั๊กอินการโหลดแบบขี้เกียจอื่น ๆ อย่างไร
- ใช้การโหลดแบบ Lazy Loading ในตัว - ใช้การโหลดแบบ Lazy Loading ในตัว หากมี (ปัจจุบันรองรับใน Chrome เท่านั้น) มิฉะนั้น ให้ใช้ JavaScript เพื่อโหลดรูปภาพแบบ Lazy Loading
- โหลดภาพก่อนเข้าวิวพอร์ต - ในขณะที่ปลั๊กอินอื่นโหลดรูปภาพเมื่ออยู่ใน "ภายใน" วิวพอร์ต รูปภาพที่บินได้จะโหลดรูปภาพเมื่อกำลังจะเข้าสู่วิวพอร์ต
- จาวาสคริปต์จิ๋ว - เพียง 0.5 KB บีบอัดลดขนาด
- หากต้องการ คุณสามารถใช้ได้เฉพาะเนทีฟ – ต้องการสนับสนุนเฉพาะ Chrome? คุณสามารถเปลี่ยนไปใช้ "เนทีฟเท่านั้น" ซึ่งไม่ฉีด JavaScript
- เขียนโค้ด HTML ทั้งหมดใหม่ - ไม่พลาดภาพเนื่องจากการโหลดแบบ Lazy Loading (แม้ว่าจะเพิ่มโดยปลั๊กอินแกลเลอรี)
- ฟิลเลอร์ใส - เพิ่ม base64 โปร่งใสขนาดเล็กลงในรูปภาพทั้งหมด ไม่มีการสั่นไหวอีกต่อไปเมื่อโหลดภาพ
- ยกเว้นคีย์เวิร์ด - ปลั๊กอินการโหลดแบบ Lazy Loading เกือบทั้งหมดมีคุณลักษณะการยกเว้น อย่างไรก็ตาม รูปภาพที่บินได้สามารถแยกรูปภาพออกจากโหนดหลักสำหรับรูปภาพได้ มีประโยชน์หากรูปภาพของคุณไม่มีชื่อคลาส
- รองรับเบราว์เซอร์ที่ปิดใช้งาน IE และ JavaScript - รูปภาพทั้งหมดจะถูกโหลดทันทีหากเป็น Internet Explorer หรือแม้กระทั่งปิดการใช้งาน JavaScript อย่างสมบูรณ์ (โดยใช้
noscriptแท็ก).
