Intersection Observer API

Intersection Observer API: ตรวจจับการปรากฏของ Element ใน Viewport

ในโลกของการพัฒนาเว็บไซต์แบบไดนามิก การตรวจจับเมื่อ Element ปรากฏใน Viewport (พื้นที่ที่ผู้ใช้มองเห็นได้) เป็นสิ่งสำคัญอย่างยิ่งสำหรับการสร้างประสบการณ์ผู้ใช้ที่น่าดึงดูดและมีประสิทธิภาพ ตัวอย่างเช่น การโหลดรูปภาพแบบ Lazy Loading, การ Trigger Animation เมื่อ Element ปรากฏ, หรือการ Implement Infinite Scrolling ล้วนต้องอาศัยความสามารถในการตรวจจับการปรากฏของ Element ทั้งสิ้น

ก่อนหน้านี้ นักพัฒนาอาจใช้เทคนิคต่างๆ เช่น การผูก Event `scroll` กับ `window` และคำนวณตำแหน่งของ Element อย่างต่อเนื่อง ซึ่งวิธีนี้มีข้อเสียคือสิ้นเปลืองทรัพยากรของ Browser และอาจส่งผลให้เว็บไซต์ทำงานช้าลง

Intersection Observer API เป็นเครื่องมือที่ทรงพลังและมีประสิทธิภาพในการตรวจจับการปรากฏของ Element ใน Viewport โดยไม่ต้องพึ่งพาเทคนิคที่ซับซ้อนและสิ้นเปลืองทรัพยากร

Intersection Observer API คืออะไร?

Intersection Observer API ช่วยให้คุณสามารถตรวจจับได้ว่า Element เป้าหมาย (Target Element) ตัดกับ Element หรือ Viewport อื่น (Root Element) หรือไม่ โดยจะแจ้งเตือนคุณเมื่อมีการเปลี่ยนแปลงในส่วนที่ตัดกันนั้น

ข้อดีของ Intersection Observer API:

ประสิทธิภาพ: Intersection Observer API ทำงานได้อย่างมีประสิทธิภาพ เนื่องจาก Browser จะจัดการการตรวจจับการตัดกันโดยอัตโนมัติ ซึ่งช่วยลดภาระในการคำนวณตำแหน่งของ Element อย่างต่อเนื่อง
ความแม่นยำ: Intersection Observer API ให้ข้อมูลที่แม่นยำเกี่ยวกับการตัดกันของ Element
ความยืดหยุ่น: Intersection Observer API สามารถปรับแต่งได้ตามความต้องการของคุณ โดยคุณสามารถกำหนด Root Element, Threshold, และ Callback Function ได้

การสร้าง IntersectionObserver

ในการใช้งาน Intersection Observer API ขั้นตอนแรกคือการสร้าง Instance ของ `IntersectionObserver` Constructor จะรับ Parameter สองตัว:

Callback Function: ฟังก์ชันที่จะถูกเรียกเมื่อมีการเปลี่ยนแปลงในการตัดกันของ Element
Options Object (Optional): Object ที่กำหนดค่าต่างๆ สำหรับ Intersection Observer

const observer = new IntersectionObserver(callback, options);

Callback Function

Callback Function จะถูกเรียกเมื่อมีการเปลี่ยนแปลงในการตัดกันของ Element Callback Function จะรับ Parameter เป็น Array ของ `IntersectionObserverEntry` Objects และ Instance ของ `IntersectionObserver` เอง

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // ตรวจสอบว่า Element ตัดกับ Viewport หรือไม่
    if (entry.isIntersecting) {
      // ทำอะไรบางอย่างเมื่อ Element ปรากฏใน Viewport
      console.log('Element is visible!');

      // หยุดการ Observe Element นี้ (Optional)
      observer.unobserve(entry.target);
    } else {
      // ทำอะไรบางอย่างเมื่อ Element หายไปจาก Viewport
      console.log('Element is not visible!');
    }
  });
};

เหตุผลเชิงออกแบบ: การใช้ Callback Function ช่วยให้โค้ดของคุณเป็นแบบ Asynchronous และ Event-Driven ซึ่งช่วยให้ Browser สามารถจัดการการตรวจจับการตัดกันได้อย่างมีประสิทธิภาพ โดยไม่ต้อง Block Main Thread

Options Object

Options Object ช่วยให้คุณสามารถปรับแต่งการทำงานของ Intersection Observer ได้ตามความต้องการของคุณ Options ที่สำคัญได้แก่:

root: Element ที่ใช้เป็น Root สำหรับการตรวจจับการตัดกัน หากไม่ได้กำหนด Root จะเป็น Viewport
rootMargin: Margin รอบ Root Element ที่ใช้ในการขยายหรือลดพื้นที่ในการตรวจจับการตัดกัน ค่านี้สามารถใช้เพื่อ Trigger Callback Function ก่อนหรือหลังที่ Element จะปรากฏใน Viewport จริง
threshold: Array ของตัวเลขระหว่าง 0 ถึง 1 ที่ระบุสัดส่วนของ Element ที่ต้องปรากฏใน Root Element จึงจะ Trigger Callback Function ตัวอย่างเช่น `threshold: [0, 0.25, 0.5, 0.75, 1]` จะ Trigger Callback Function เมื่อ 0%, 25%, 50%, 75%, และ 100% ของ Element ปรากฏใน Root Element

const options = {
  root: document.querySelector('#scrollArea'), // Root Element
  rootMargin: '0px', // Margin รอบ Root Element
  threshold: [0, 0.5, 1] // สัดส่วนของ Element ที่ต้องปรากฏ
};

เหตุผลเชิงออกแบบ: การมี Options Object ช่วยให้ Intersection Observer มีความยืดหยุ่นสูง คุณสามารถปรับแต่งการทำงานของ Intersection Observer ให้เหมาะกับความต้องการของ Application ของคุณได้

IntersectionObserverEntry

`IntersectionObserverEntry` Object มีข้อมูลเกี่ยวกับการเปลี่ยนแปลงในการตัดกันของ Element ข้อมูลที่สำคัญได้แก่:

boundingClientRect: ขนาดและตำแหน่งของ Element เป้าหมาย (Target Element)
intersectionRatio: สัดส่วนของ Element ที่ตัดกับ Root Element ค่านี้อยู่ระหว่าง 0 ถึง 1
intersectionRect: ขนาดและตำแหน่งของส่วนที่ Element ตัดกับ Root Element
isIntersecting: Boolean ที่ระบุว่า Element ตัดกับ Root Element หรือไม่
rootBounds: ขนาดและตำแหน่งของ Root Element
target: Element เป้าหมาย (Target Element)
time: Timestamp ที่ระบุเวลาที่เกิดการเปลี่ยนแปลงในการตัดกัน

const callback = (entries, observer) => {
  entries.forEach(entry => {
    console.log('Intersection Ratio:', entry.intersectionRatio);
    console.log('Is Intersecting:', entry.isIntersecting);
  });
};

การใช้งาน Intersection Observer

เมื่อคุณสร้าง `IntersectionObserver` Instance แล้ว คุณต้องบอกให้ Observer เฝ้าดู Element ที่คุณสนใจ โดยใช้ Method `observe()`

const target = document.querySelector('#myElement');
observer.observe(target);

เมื่อ Element ตัดกับ Root Element หรือ Viewport Callback Function จะถูกเรียก และคุณสามารถใช้ข้อมูลใน `IntersectionObserverEntry` Object เพื่อทำการต่างๆ เช่น โหลดรูปภาพ, Trigger Animation, หรือ Implement Infinite Scrolling

เมื่อคุณไม่ต้องการให้ Observer เฝ้าดู Element แล้ว คุณสามารถใช้ Method `unobserve()` เพื่อหยุดการ Observe Element นั้น

observer.unobserve(target);

คุณยังสามารถหยุดการ Observe Element ทั้งหมดได้โดยใช้ Method `disconnect()`

observer.disconnect();

ตัวอย่างการใช้งาน: Lazy Loading รูปภาพ

Lazy Loading เป็นเทคนิคที่ใช้ในการโหลดรูปภาพเฉพาะเมื่อรูปภาพนั้นปรากฏใน Viewport เท่านั้น ซึ่งช่วยลดเวลาในการโหลดหน้าเว็บและประหยัด Bandwidth

<img data-src="image.jpg" class="lazy-load">

const images = document.querySelectorAll('.lazy-load');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy-load');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

ในตัวอย่างนี้ เราใช้ `data-src` Attribute เพื่อเก็บ URL ของรูปภาพจริง และเมื่อรูปภาพปรากฏใน Viewport เราจะกำหนดค่า `src` Attribute ให้กับ URL ของรูปภาพจริง ทำให้ Browser โหลดรูปภาพนั้น

สรุป

Intersection Observer API เป็นเครื่องมือที่ทรงพลังและมีประสิทธิภาพในการตรวจจับการปรากฏของ Element ใน Viewport ช่วยให้คุณสามารถสร้างเว็บไซต์ที่น่าดึงดูดและมีประสิทธิภาพได้ โดยไม่ต้องพึ่งพาเทคนิคที่ซับซ้อนและสิ้นเปลืองทรัพยากร การทำความเข้าใจและใช้งาน Intersection Observer API เป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บไซต์ทุกคน