Signatur
Beschreibung
Mit disconnect() hört ein IntersectionObserver auf, alle Elemente zu beobachten, die vorher mit observe() registriert wurden. Danach wird der Callback nicht mehr aufgerufen, bis Sie wieder observe() aufrufen.
Die Methode eignet sich zum Aufräumen: etwa wenn eine Komponente aus dem DOM entfernt wird (z. B. im Cleanup von React-useEffect oder in disconnectedCallback von Web Components), wenn alle Bilder beim Lazy Loading geladen sind oder wenn eine Einblende-Animation nur einmal laufen soll.
Anders als unobserve(target), das nur ein einzelnes Element abmeldet, entfernt disconnect() alle Ziele auf einmal. Das Observer-Objekt selbst bleibt dabei gültig und lässt sich mit observe() weiter verwenden. Wurzel (root), rootMargin und thresholds bleiben ebenfalls gleich.
Rückgabewert
undefined).Beispiele
Lazy Loading: Observer beenden, wenn alle Bilder geladen sind
const images = document.querySelectorAll('img[data-src]');
let remaining = images.length;
const observer = new IntersectionObserver((entries, obs) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);
remaining--;
}
// Alle Bilder geladen – Observer komplett abschalten
if (remaining === 0) {
obs.disconnect();
console.log('Alle Bilder geladen, Observer getrennt');
}
}, { rootMargin: '200px' });
images.forEach((img) => observer.observe(img));Aufräumen in einer Web Component
class RevealBox extends HTMLElement {
connectedCallback() {
this.observer = new IntersectionObserver(([entry]) => {
this.classList.toggle('visible', entry.isIntersecting);
}, { threshold: 0.25 });
this.observer.observe(this);
}
disconnectedCallback() {
// Verhindert Speicherlecks und Callbacks für entfernte Elemente
this.observer?.disconnect();
this.observer = null;
}
}
customElements.define('reveal-box', RevealBox);Cleanup in React mit useEffect
import { useEffect, useRef, useState } from 'react';
export const useInView = (options) => {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(([entry]) => {
setInView(entry.isIntersecting);
}, options);
observer.observe(ref.current);
// Cleanup beim Unmount oder bei geänderten Optionen
return () => observer.disconnect();
}, [options]);
return [ref, inView];
};Observer nach disconnect() wiederverwenden
const target = document.querySelector('#banner');
const observer = new IntersectionObserver((entries) => {
entries.forEach((e) => console.log('sichtbar:', e.isIntersecting));
});
observer.observe(target);
// Beobachtung pausieren
observer.disconnect();
console.log(observer.takeRecords().length);
// Später erneut starten – gleiche Optionen
observer.observe(target);// Wichtig · Fallstricke
- Noch ausstehende Einträge gehen verloren:
disconnect()verwirft Einträge, die schon erkannt, aber noch nicht an den Callback übergeben wurden. Brauchen Sie diese, rufen Sie vorhertakeRecords()auf. disconnect()löscht das Observer-Objekt nicht. Wer es nicht mehr braucht, sollte auch die Referenz entfernen (z. B. aufnullsetzen), damit der Garbage Collector aufräumen kann.- Mehrfaches Aufrufen oder ein Aufruf ohne beobachtete Ziele ist unkritisch und wirft keinen Fehler.
- Soll nur ein Element abgemeldet werden, nehmen Sie
unobserve(target).disconnect()meldet immer alle ab. - Kompatibilität: wird von allen modernen Browsern unterstützt (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+). Im Internet Explorer gibt es die Methode nicht; dort hilft nur ein Polyfill.