การโหลดแบบขี้เกียจด้วย IntersectionObserver
เลื่อนการโหลดรูปภาพและเนื้อหาจนกว่าจะเข้าสู่พื้นที่แสดงผล
การโหลดแบบขี้เกียจด้วย IntersectionObserver เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
นอกเหนือจาก loading="lazy" แบบเนทีฟ
การโหลดแบบขี้เกียจของเบราว์เซอร์รองรับ <img> และ <iframe> สำหรับสิ่งอื่น เช่น รูปภาพพื้นหลัง วิดีโอ คอมโพเนนต์ที่ใช้ทรัพยากรมาก และวิดเจ็ตจากผู้ให้บริการภายนอก IntersectionObserver คือเครื่องมือที่เหมาะสมสำหรับเลื่อนการทำงานจนกว่าองค์ประกอบจะอยู่ใกล้วิวพอร์ต
รูปแบบการทำงาน
ทำเครื่องหมายองค์ประกอบที่เลื่อนการทำงานด้วยแอตทริบิวต์ data-src ซึ่งเก็บแหล่งข้อมูลจริงไว้ และแสดงตัวแทนขนาดเล็ก สังเกตแต่ละองค์ประกอบ เมื่อเกิดการตัดกัน ให้เปลี่ยน data-src เป็น src (หรือเปิดใช้งานองค์ประกอบด้วยวิธีอื่น) แล้วเรียก unobserve เพื่อไม่ให้ฟังก์ชันเรียกกลับทำงานอีก
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>รูปภาพพื้นหลังแบบขี้เกียจ
CSS ไม่สามารถโหลด background-image แบบขี้เกียจได้โดยกำเนิด เมื่อเกิดการตัดกัน ให้ตั้งค่า el.style.backgroundImage = `url("${el.dataset.bg}")` หรือเพิ่มคลาส CSS ที่กำหนด background-image ไว้ รูปภาพจะเริ่มดาวน์โหลดในขณะนั้น
วิดีโอแบบขี้เกียจ
สำหรับวิดีโอที่อยู่ใต้ส่วนที่มองเห็นในตอนแรก ให้ละเว้น src และองค์ประกอบ source ในช่วงเริ่มต้น เมื่อเกิดการตัดกัน ให้แทรกแท็ก <source> แล้วเรียก video.load() หากไม่ทำเช่นนี้ ข้อมูลเมตาของวิดีโออาจถูกดาวน์โหลดทันที แม้ผู้ใช้จะยังไม่ได้เลื่อนเข้าใกล้องค์ประกอบ
วิดเจ็ตจากผู้ให้บริการภายนอก
การฝังเนื้อหาจากสื่อสังคม วิดเจ็ตความคิดเห็น และสคริปต์แชตอาจดึงข้อมูลเข้ามาหลายเมกะไบต์ เมื่อเกิดการตัดกัน ให้นำเข้าสคริปต์ตั้งค่าของวิดเจ็ตแบบไดนามิก: await import("/embed.js") ผู้ใช้จะเสียต้นทุนนี้เฉพาะเมื่อเลื่อนมาถึงส่วนนั้นจริง ๆ
iframe แบบขี้เกียจ (นอกเหนือจาก loading="lazy")
การโหลด iframe แบบขี้เกียจของเบราว์เซอร์ยังคงดาวน์โหลดเอกสาร iframe อยู่ สำหรับการฝังเนื้อหาที่มีขนาดใหญ่ เช่น แผนที่หรือโปรแกรมเล่นวิดีโอ ให้ใช้รูปแบบภาพแทน: แสดงรูปภาพตัวแทน และเมื่อมีการคลิกหรือเกิดการตัดกัน ให้แทนที่ด้วย iframe จริง วิธีนี้ลดขนาดหน้าเริ่มต้นได้อย่างมาก
rootMargin สำหรับการโหลดล่วงหน้า
rootMargin: "200px" จะเริ่มโหลดก่อนที่องค์ประกอบจะเข้าสู่วิวพอร์ต 200 พิกเซล ปรับค่าตามความเร็วการเลื่อน: หากน้อยเกินไป ผู้ใช้อาจเห็นตัวแทนระหว่างเลื่อนอย่างรวดเร็ว หากมากเกินไป ก็จะทำลายจุดประสงค์ของการโหลดแบบขี้เกียจด้วยการโหลดทุกอย่าง
เรียก unobserve เมื่อทำงานแล้ว
โปรดเรียก observer.unobserve(element) ทุกครั้งหลังจากเปิดใช้งานการโหลดแบบขี้เกียจแล้ว มิฉะนั้นฟังก์ชันเรียกกลับจะทำงานทุกครั้งที่องค์ประกอบกลับเข้าสู่วิวพอร์ต ทำให้เสีย CPU โดยเปล่าประโยชน์และอาจเกิดข้อผิดพลาดหากการเปิดใช้งานไม่สามารถทำซ้ำได้อย่างปลอดภัย
กันพื้นที่ไว้
กำหนดความกว้างและความสูงให้รูปภาพแบบขี้เกียจ และกำหนดความสูงขั้นต่ำให้คอนเทนเนอร์แบบขี้เกียจ หากไม่กำหนดขนาดอย่างชัดเจน หน้าเว็บจะจัดวางใหม่เมื่อเนื้อหาโหลด ทำให้การเลื่อนสะดุดและได้คะแนนการเลื่อนผังหน้าแบบสะสมที่ไม่ดี
ทางเลือกสำรองเมื่อไม่มี JS
สำหรับการเพิ่มความสามารถแบบก้าวหน้าอย่างสมบูรณ์ ให้ห่อองค์ประกอบแบบขี้เกียจไว้ใน <noscript> พร้อม src จริง: <noscript><img src="/photo.jpg"></noscript> ผู้ใช้ที่ไม่มี JS จะได้รูปภาพโดยโหลดทันที ส่วนผู้ใช้ที่มี JS จะได้เวอร์ชันแบบขี้เกียจ ควรใช้ร่วมกับมาร์กอัป data-src ที่ถูกต้อง
การรวมองค์ประกอบจำนวนมากเป็นชุด
ตัวสังเกตอินสแตนซ์เดียวสามารถเฝ้าดูองค์ประกอบหลายร้อยรายการได้อย่างมีประสิทธิภาพ อย่าสร้างตัวสังเกตหนึ่งตัวต่อองค์ประกอบหนึ่งรายการ ให้สร้างตัวสังเกตร่วมหนึ่งตัวพร้อมตัวเลือกที่ต้องการ แล้วใช้ observe() เพื่อลงทะเบียนเป้าหมายแต่ละรายการ
การใช้ร่วมกับ loading="lazy" แบบเนทีฟ
สำหรับ <img> โดยเฉพาะ ให้ใช้ loading="lazy" เป็นกลไกหลัก และใช้ IntersectionObserver เฉพาะกรณีที่การโหลดแบบขี้เกียจของเบราว์เซอร์ไม่ครอบคลุม ทั้งสองแบบทำงานร่วมกันได้ดี: แบบเนทีฟจัดการรูปภาพที่อยู่นอกส่วนแสดงผลเริ่มต้น ส่วน IntersectionObserver จัดการพื้นหลัง คอมโพเนนต์ และตัวโหลดแบบกำหนดเองอื่น ๆ
ตรวจสอบความรู้
เหตุใดจึงสำคัญที่จะต้องเรียก observer.unobserve(element) หลังจากเปิดใช้งานองค์ประกอบที่โหลดแบบขี้เกียจแล้ว
สรุป
IntersectionObserver ขยายการโหลดแบบขี้เกียจให้ครอบคลุมนอกเหนือจาก <img loading="lazy"> แบบเนทีฟ ไปยังพื้นหลัง วิดีโอ วิดเจ็ตจากผู้ให้บริการภายนอก และการนำเข้าคอมโพเนนต์แบบไดนามิก ใช้ตัวแทน data-src แล้วสลับเมื่อเกิดการตัดกัน และเรียก unobserve หลังเปิดใช้งาน โหลดล่วงหน้าด้วย rootMargin กันพื้นที่ด้วยความกว้างและความสูง จัดเตรียมทางเลือกสำรองด้วย noscript และใช้การโหลดแบบขี้เกียจของเบราว์เซอร์ร่วมด้วยเมื่อเหมาะสม
คำถามที่พบบ่อย
บทเรียน “การโหลดแบบขี้เกียจด้วย IntersectionObserver” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การโหลดแบบขี้เกียจด้วย IntersectionObserver” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การโหลดแบบขี้เกียจด้วย IntersectionObserver”
เลื่อนการโหลดรูปภาพและเนื้อหาจนกว่าจะเข้าสู่พื้นที่แสดงผล คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การโหลดแบบขี้เกียจด้วย IntersectionObserver” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- IntersectionObserver API และค่าเกณฑ์
- การโหลดแบบขี้เกียจด้วย IntersectionObserver
- การใช้งานการเลื่อนแบบไม่สิ้นสุด
- การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน