JavaScript Academy · บทเรียน

การโหลดรูปภาพแบบขี้เกียจ

โหลดรูปภาพเฉพาะเมื่อรูปภาพปรากฏขึ้น

การโหลดรูปภาพแบบขี้เกียจ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

แนวคิดการโหลดเมื่อจำเป็น

การโหลดเมื่อจำเป็นจะเลื่อนการดาวน์โหลดรูปภาพออกไปจนกว่ารูปภาพเหล่านั้นใกล้จะเลื่อนเข้ามาอยู่ในมุมมอง วิธีนี้ช่วยประหยัดแบนด์วิดท์และทำให้การโหลดหน้าเว็บครั้งแรกเร็วขึ้น โดยเฉพาะหน้าที่ยาวและมีรูปภาพจำนวนมาก

การจัดเก็บ URL จริง

เคล็ดลับคือ อย่าใส่ URL รูปภาพจริงไว้ใน src ตั้งแต่แรก ให้จัดเก็บไว้ในแอตทริบิวต์ data-src เพื่อไม่ให้เบราว์เซอร์ดาวน์โหลดรูปภาพในตอนนี้

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

การเลือกภาพที่โหลดเมื่อจำเป็น

รวบรวมรูปภาพทั้งหมดที่ต้องโหลดเมื่อจำเป็น แนวทางทั่วไปคือใช้คลาสร่วมกัน หรือเลือกจากการมี data-src

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

การสร้างตัวสังเกตการณ์

สร้างตัวสังเกตการณ์ที่มีฟังก์ชันเรียกกลับสำหรับโหลดรูปภาพจริงเมื่อรูปภาพตัดกับพื้นที่มองเห็น ใช้ rootMargin เพื่อเริ่มโหลดรูปภาพล่วงหน้าเล็กน้อยก่อนที่รูปภาพจะปรากฏ

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

การโหลดเมื่อเกิดการตัดกัน

เมื่อรูปภาพตัดกับพื้นที่มองเห็น ให้คัดลอกค่า data-src ไปยัง src จากนั้นเบราว์เซอร์จะดาวน์โหลดและแสดงรูปภาพ

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

หยุดการสังเกตหลังโหลด

เมื่อโหลดเสร็จแล้ว ก็ไม่จำเป็นต้องติดตามรูปภาพนั้นอีก เรียกใช้ unobserve เพื่อคืนทรัพยากรและป้องกันการทำงานซ้ำ

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

เริ่มการสังเกต

วนซ้ำผ่านรูปภาพที่โหลดเมื่อจำเป็นทุกภาพแล้วเริ่มสังเกต รูปภาพที่เหลือจะได้รับการจัดการโดยตัวสังเกตการณ์ขณะที่ผู้ใช้เลื่อนหน้า

lazyImages.forEach(img => observer.observe(img));

การแสดงภาพแทนที่

มอบประสบการณ์ที่ราบรื่นด้วยการแสดงภาพแทนที่ขนาดเล็กและเบลอ หรือสีทึบระหว่างที่รูปภาพจริงกำลังโหลด จากนั้นค่อยแสดงรูปภาพจริงแบบจางเข้าผ่านเหตุการณ์ load ของรูปภาพ

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

แอตทริบิวต์ loading แบบเนทีฟ

เบราว์เซอร์สมัยใหม่ยังรองรับการโหลดเมื่อจำเป็นแบบเนทีฟผ่าน loading="lazy" บน img และ iframe ตัวสังเกตการตัดกันยังมีประโยชน์สำหรับการควบคุมแบบกำหนดเอง ภาพเคลื่อนไหว หรือพฤติกรรมสำรอง

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

การล้าง data-src

หลังจากโหลดแล้ว คุณอาจลบแอตทริบิวต์ data-src ออก เพื่อให้ DOM เป็นระเบียบและป้องกันความสับสนในโค้ดหรือการค้นหาในภายหลัง

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

รูปแบบทั้งหมด

การโหลดรูปภาพเมื่อจำเป็นด้วยตัวสังเกตการตัดกันเป็นรูปแบบที่เป็นระเบียบและมีประสิทธิภาพ: จัดเก็บ URL ไว้ใน data-src สังเกตแต่ละรูปภาพ แทนที่ด้วย URL จริงเมื่อเกิดการตัดกัน แล้วหยุดการสังเกต ผลลัพธ์คือหน้าที่โหลดเร็วขึ้นและโหลดรูปภาพได้ตรงเวลาที่จำเป็น

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องการโหลดรูปภาพเมื่อจำเป็น

สรุปทบทวน

คุณได้สร้างการโหลดรูปภาพเมื่อจำเป็น:

จัดเก็บ URL จริงไว้ใน data-src
สังเกตแต่ละรูปภาพด้วยตัวสังเกตการตัดกัน
เมื่อเกิดการตัดกัน ให้คัดลอก data-src ไปยัง src แล้วเรียกใช้ unobserve
ใช้ rootMargin เพื่อโหลดล่วงหน้าก่อนปรากฏในมุมมองเพียงเล็กน้อย
loading="lazy" แบบเนทีฟเป็นทางเลือกที่ง่ายกว่า

ถัดไป เราจะสร้างการเลื่อนแบบไม่สิ้นสุด

คำถามที่พบบ่อย

บทเรียน “การโหลดรูปภาพแบบขี้เกียจ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโหลดรูปภาพแบบขี้เกียจ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโหลดรูปภาพแบบขี้เกียจ”

โหลดรูปภาพเฉพาะเมื่อรูปภาพปรากฏขึ้น คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การโหลดรูปภาพแบบขี้เกียจ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy