Meta tags:
description=Lerne die JavaScript Intersection Observer API kennen, um effizient zu erkennen, wann ein Element den viewport betritt oder verlässt — für Lazy Loading…;

Headings (most frequently used words):

anwendungsfall, observer, das, scroll, javascript, intersection, api, problem, sie, löst, grundlegende, verwendung, den, konfigurieren, der, inhalt, eines, eintrags, methoden, observe, unobserve, disconnect, lazy, loading, von, bildern, infinite, reveal, on, animationen, impression, sichtbarkeitstracking, zusammenfassung, teste, dein, wissen, root, rootmargin, threshold,

Text of the page (most frequently used words):
und (65), das (36), ein (32), die (32), observer (28), api (27), element (23), entry (23), dom (23), ist (22), const (21), #scroll (20), der (20), javascript (18), von (17), den (17), lernen (15), des (15), für (14), intersectionobserver (14), kopieren (14), entries (14), loading (13), auf (13), sichtbar (12), root (12), mit (12), wird (12), target (12), img (12), methoden (11), observe (11), eine (11), browser (11), wenn (11), document (11), new (11), viewport (10), eines (9), sie (9), elemente (9), einen (9), callback (9), data (9), src (9), html (8), web (8), anwendungsfall (8), lazy (8), unobserve (8), threshold (8), werden (8), isintersecting (8), foreach (8), events (8), animationen (7), page (7), elements (7), sichtbarkeit (7), oder (7), sentinel (7), the (7), tools (6), css (6), infinite (6), array (6), rootmargin (6), nur (6), visible (6), 0px (6), photo (6), event (6), w3docs (5), alle (5), json (5), impression (5), reveal (5), löst (5), als (5), welche (5), getboundingclientrect (5), intersection (5), nicht (5), fetch (5), async (5), queryselector (5), jedes (5), beobachten (5), console (5), eigenschaften (5), and (5), auslösen (5), string (5), formatter (5), color (5), über (4), generator (4), bildern (4), eintrags (4), kann (4), bevor (4), verwendet (4), aus (4), position (4), einem (4), listener (4), ziel (4), auch (4), intersectionratio (4), tatsächlich (4), dann (4), list (4), await (4), function (4), log (4), object (4), dem (4), shadow (4), einführung (4), code (3), encoder (3), editor (3), quizze (3), übungen (3), php (3), wissen (3), disconnect (3), inhalt (3), this (3), was (3), prüfen (3), sein (3), konstruktor (3), sind (3), übung (3), asynchron (3), main (3), warum (3), aktuell (3), innerhalb (3), durch (3), rufe (3), sobald (3), wann (3), sodass (3), standard (3), adobserver (3), queryselectorall (3), transform (3), opacity (3), items (3), bei (3), laden (3), bild (3), start (3), 200px (3), 400 (3), height (3), 600 (3), width (3), alt (3), jpg (3), bis (3), url (3), hat (3), wurde (3), sich (3), ohne (3), muster (3), handling (3), rect (3), window (3), flag (3), objekte (3), promise (3), funktionen (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), teste (2), dein (2), zusammenfassung (2), sichtbarkeitstracking (2), konfigurieren (2), grundlegende (2), verwendung (2), problem (2), resizeobserver (2), mutation (2), muss (2), zahl (2), kein (2), positiver (2), unterer (2), dazu (2), gemeldet (2), gescrollt (2), null (2), vollständig (2), aussagen (2), optionen (2), korrekt (2), browsern (2), beim (2), erscheinen (2), möglichkeit (2), außerhalb (2), threads (2), jank (2), hauptgrund (2), vorgezogen (2), eigenschaft (2), gibt (2), elementen (2), erstelle (2), aufgabe (2), erledigt (2), dies (2), beispielsweise (2), sekunde (2), sichtbare (2), once (2), dataset (2), müssen (2), oft (2), inhalte (2), ermöglicht (2), teil (2), gesehen (2), revealobserver (2), revealitems (2), fire (2), translatey (2), ease (2), animation (2), klasse (2), scrollobserver (2), loadmore (2), false (2), item (2), res (2), true (2), return (2), let (2), div (2), ende (2), dieses (2), während (2), native (2), attribut (2), zurück (2), verhalten (2), inhalten (2), imageobserver (2), images (2), watching (2), load (2), beobachtung (2), seine (2), damit (2), mehr (2), höre (2), einmal (2), einzelnes (2), dir (2), drei (2), ziels (2), beobachtete (2), wie (2), zahlen (2), soll (2), bedeutet (2), bottom (2), wert (2), box (2), margin (2), options (2), änderungen (2), ausgelöst (2), pro (2), optional (2), statt (2), selbst (2), dich (2), arbeit (2), scrollen (2), performance (2), diese (2), scrolling (2), inview (2), betritt (2), verlässt (2), effizient (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), class (2), prototypes (2), interaktive (2), verwenden (2), property (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, immer, einzelne, führen, dass, setzen, funktioniert, älteren, animiert, automatisch, einzige, auszulesen, prüft, vermeidet, inviewport, isvisible, ersetzt, fragile, leistungshungrige, saubere, asynchrone, reagieren, weise, ihn, deine, ziele, hin, lies, kannst, genau, einstellen, auslöst, tracking, sowohl, einfach, reibungslos, funktionieren, könnte, timer, erweitert, volle, erfordert, gezählt, gängiger, anzeigen, least, count, each, adid, sendimpression, analytics, wurden, vorhanden, waren, höherer, erfassen, bedeutender, when, showing, animate, only, add, classlist, transition, beliebter, effekt, einblenden, betreten, halte, lass, richtigen, moment, hinzufügen, appendchild, title, textcontent, createelement, guard, against, overlapping, loads, platziere, leeres, liste, scrollt, lade, nächste, datenseite, füge, hinzu, unten, bleibt, derselbe, weiterhin, benutzer, weiterscrollt, moderne, unterstützen, überhaupt, benötigt, greife, benutzerdefiniertes, brauchst, platzhalter, tausch, einblendeffekt, iframe, hinweis, little, early, job, done, stop, removeattribute, real, image, third, second, first, verschiebt, herunterladen, kürze, lege, echte, beobachte, tausche, beende, wichtige, best, practice, einmalige, fertig, geladen, darauf, aufhört, etwas, verfolgen, ändern, beginne, instanz, bietet, tofixed, ratio, for, zeitstempel, änderung, erfasst, time, rechteck, angepasst, rootbounds, intersectionrect, größe, boundingclientrect, viel, boolean, beschreibt, zum, zeitpunkt, aufrufs, nützlichsten, 100, visibility, mitteilt, welchen, sichtbarkeitsverhältnissen, pixel, jedem, angegebenen, verhältnis, trigger, before, reaches, edge, abstand, geschrieben, vergrößert, verkleinert, schnittmengen, prüfungen, üblicher, trick, nützlich, frühzeitig, container, sichtbarkeitsprüfung, nachfahre, eigene, browsers, zweite, argument, konstruktors, ausgeführt, mehrere, einträge, aufruf, melden, initialen, sichtbarkeitszustand, erhältst, warten, unterstützung, allen, modernen, ausgezeichnet, direkt, nach, gebündelt, info, erhält, beobachtetem, dessen, geändert, einzelner, viele, empfohlene, anstatt, eigenen, erstellen, einträgen, left, else, now, create, with, erstellst, teilst, ihm, dreht, modell, positionen, abzufragen, beobachtet, ruft, ändert, findet, blockiert, wichtig, findest, unter, enger, verwandter, struktur, überwacht, mutationobserver, optimization, dutzende, male, zwingt, zur, neuberechnung, layouts, reflow, synchron, thread, scrollvorgangs, auszuführen, klassische, ursache, ruckeln, siehe, dieser, something, innerheight, top, addeventlistener, old, expensive, way, runs, every, tick, existierte, war, beantwortung, einfachen, frage, gerade, bildschirm, überraschend, aufwendig, man, musste, anhängen, aufrufen, vergleichen, resize, bitten, benachrichtigen, sichtbaren, bereich, seite, geschieht, performanceaufwand, überwachen, richtige, werkzeug, aufbau, messung, anzeige, banner, lerne, kennen, erkennen, scrollbasierte, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, unicode, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, various, ressourcen, onload, onerror, scripts, defer, domcontentloaded, beforeunload, unload, resource, ereignis, methode, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, getelement, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, prototypale, vererbung, inheritance, widgets, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, weakmap, weakset, map, set, iterables, strings, math, primitiven, types, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript intersection observer api lerne die javascript intersection observer api kennen um effizient zu erkennen wann ein element den viewport betritt oder verlässt für lazy loading infinite scroll und scrollbasierte animationen die intersection observer api ermöglicht es dir den browser zu bitten dich zu benachrichtigen wenn ein element den sichtbaren bereich der seite betritt oder verlässt dies geschieht effizient und asynchron ohne den performanceaufwand scroll events selbst zu überwachen sie ist das richtige werkzeug für lazy loading von bildern den aufbau von infinite scroll das auslösen von animationen beim erscheinen von inhalten und die messung ob eine anzeige oder ein banner tatsächlich gesehen wurde das problem das sie löst bevor diese api existierte war die beantwortung der einfachen frage ist dieses element gerade auf dem bildschirm überraschend aufwendig man musste einen listener an das scroll event und oft auch an resize anhängen und dann getboundingclientrect für jedes beobachtete element aufrufen um seine position mit dem viewport zu vergleichen the old expensive way runs on every scroll tick window addeventlistener scroll const rect element getboundingclientrect const inview rect top window innerheight rect bottom 0 if inview do something kopieren scroll events werden dutzende male pro sekunde ausgelöst und getboundingclientrect zwingt den browser zur neuberechnung des layouts ein reflow diese arbeit synchron im main thread während eines scrollvorgangs auszuführen ist eine klassische ursache für ruckeln jank siehe event handling im dom und javascript scrolling für das verhalten dieser events intersectionobserver dreht das modell um statt selbst positionen abzufragen beobachtet der browser die elemente für dich und ruft nur zurück wenn sich die sichtbarkeit tatsächlich ändert die arbeit findet außerhalb des main threads statt sodass das scrollen nicht blockiert wird mehr dazu warum das wichtig ist findest du unter dom performance optimization es ist ein enger verwandter der mutationobserver api die die dom struktur auf änderungen überwacht nicht die sichtbarkeit grundlegende verwendung du erstellst einen observer mit einem callback und teilst ihm dann über observe mit welche elemente er beobachten soll 1 create an observer with a callback and optional options const observer new intersectionobserver entries entries foreach entry if entry isintersecting console log element is now visible entry target else console log element left the viewport entry target 2 start watching a target element const target document queryselector box observer observe target kopieren der callback erhält ein array von einträgen einen pro beobachtetem element dessen sichtbarkeit sich geändert hat ein einzelner observer kann viele elemente beobachten und das ist das empfohlene muster erstelle einen observer und rufe observe für jedes ziel auf anstatt für jedes element einen eigenen observer zu erstellen i info der callback wird asynchron ausgeführt und änderungen werden gebündelt der browser kann mehrere einträge in einem aufruf melden er wird auch einmal direkt nach dem start der beobachtung ausgelöst sodass du den initialen sichtbarkeitszustand des elements erhältst ohne auf ein scroll event warten zu müssen die browser unterstützung ist in allen modernen browsern ausgezeichnet den observer konfigurieren das zweite argument des konstruktors ist ein options object mit drei eigenschaften root das element das als viewport für die sichtbarkeitsprüfung verwendet wird das ziel muss ein nachfahre des root sein wenn root den wert null hat standard wird der eigene viewport des browsers verwendet const observer new intersectionobserver callback root document queryselector scroll container kopieren rootmargin ein abstand um den root der wie ein css margin wert geschrieben wird er vergrößert oder verkleinert die box die für schnittmengen prüfungen verwendet wird ein üblicher trick ist ein positiver unterer margin damit elemente als sichtbar gemeldet werden bevor sie tatsächlich in den viewport gescrollt werden nützlich um inhalte frühzeitig zu laden const observer new intersectionobserver callback trigger 200px before the element reaches the bottom edge rootmargin 0px 0px 200px 0px kopieren threshold eine zahl von 0 bis 1 oder ein array von zahlen das dem observer mitteilt bei welchen sichtbarkeitsverhältnissen er auslösen soll 0 bedeutet auslösen sobald ein einzelnes pixel sichtbar ist 1 bedeutet nur auslösen wenn das element vollständig sichtbar ist ein array löst bei jedem angegebenen verhältnis aus const observer new intersectionobserver callback fire at 0 50 and 100 visibility threshold 0 0 5 1 kopieren der inhalt eines eintrags jedes object im entries array beschreibt die sichtbarkeit eines elements zum zeitpunkt des callback aufrufs die nützlichsten eigenschaften sind isintersecting ein boolean true wenn das element aktuell innerhalb des root sichtbar ist intersectionratio wie viel des elements sichtbar ist von 0 bis 1 target das beobachtete element boundingclientrect größe und position des ziels intersectionrect der sichtbare teil des ziels rootbounds das rechteck des root angepasst durch rootmargin time ein zeitstempel wann die änderung erfasst wurde const observer new intersectionobserver entries for const entry of entries console log entry target id visible entry isintersecting console log ratio entry intersectionratio tofixed 2 kopieren methoden observe unobserve disconnect eine observer instanz bietet dir drei methoden observe element beginne ein element zu beobachten unobserve element höre auf ein einzelnes element zu beobachten disconnect höre auf alle elemente auf einmal zu beobachten eine wichtige best practice sobald ein element seine einmalige aufgabe erledigt hat beispielsweise ein bild das fertig lazy geladen wurde rufe unobserve darauf auf damit der browser aufhört etwas zu verfolgen das sich nicht mehr ändern wird anwendungsfall 1 lazy loading von bildern lazy loading verschiebt das herunterladen von bildern bis sie in kürze sichtbar werden lege die echte url in ein data src attribut beobachte jedes bild und tausche sie in src aus wenn es sichtbar wird dann beende die beobachtung img data src photo 1 jpg alt first photo width 600 height 400 img data src photo 2 jpg alt second photo width 600 height 400 img data src photo 3 jpg alt third photo width 600 height 400 kopieren const images document queryselectorall img data src const imageobserver new intersectionobserver entries observer entries foreach entry if entry isintersecting return const img entry target img src img dataset src load the real image img removeattribute data src observer unobserve img job done stop watching it rootmargin 0px 0px 200px 0px start loading a little early images foreach img imageobserver observe img kopieren hinweis moderne browser unterstützen auch das native loading lazy attribut bei img und iframe das überhaupt kein javascript benötigt greife auf intersectionobserver zurück wenn du benutzerdefiniertes verhalten brauchst einen platzhalter tausch einen einblendeffekt oder das laden von nicht bild inhalten anwendungsfall 2 infinite scroll für infinite scroll platziere ein leeres sentinel element am ende der liste wenn dieses sentinel in den viewport scrollt lade die nächste datenseite und füge sie hinzu da das sentinel unten bleibt löst derselbe observer weiterhin aus während der benutzer weiterscrollt ul id list ul div id sentinel div kopieren const list document queryselector list const sentinel document queryselector sentinel let page 1 let loading false async function loadmore if loading return guard against overlapping loads loading true const res await fetch api items page page const items await res json items foreach item const li document createelement li li textcontent item title list appendchild li page 1 loading false const scrollobserver new intersectionobserver entries if entries 0 isintersecting loadmore scrollobserver observe sentinel kopieren anwendungsfall 3 reveal on scroll animationen ein beliebter effekt ist das ein oder einblenden von elementen wenn sie den viewport betreten halte die animation in css und lass javascript im richtigen moment eine klasse hinzufügen reveal opacity 0 transform translatey 20 px transition opacity 0 6 s ease transform 0 6 s ease reveal is visible opacity 1 transform translatey 0 kopieren const revealitems document queryselectorall reveal const revealobserver new intersectionobserver entries observer entries foreach entry if entry isintersecting entry target classlist add is visible observer unobserve entry target animate only once threshold 0 15 fire when 15 is showing revealitems foreach el revealobserver observe el kopieren anwendungsfall 4 impression sichtbarkeitstracking analytics müssen oft wissen ob inhalte tatsächlich gesehen wurden nicht nur im dom vorhanden waren ein höherer threshold ermöglicht es eine impression nur dann zu erfassen wenn ein bedeutender teil eines elements sichtbar ist const adobserver new intersectionobserver entries entries foreach entry if entry intersectionratio 0 5 sendimpression entry target dataset adid adobserver unobserve entry target count each ad once threshold 0 5 at least 50 visible document queryselectorall ad foreach ad adobserver observe ad kopieren dies könnte durch einen timer erweitert werden der beispielsweise eine volle sekunde mit 50 sichtbarkeit erfordert bevor eine impression gezählt wird ein gängiger standard für sichtbare anzeigen zusammenfassung die intersection observer api ersetzt fragile leistungshungrige scroll listener durch eine saubere asynchrone möglichkeit auf die sichtbarkeit von elementen zu reagieren erstelle einen observer weise ihn mit observe auf deine ziele hin lies isintersecting und intersectionratio im callback und rufe unobserve auf sobald die aufgabe eines elements erledigt ist mit root rootmargin und threshold kannst du genau einstellen wann er auslöst sodass lazy loading infinite scroll scroll animationen und impression tracking sowohl einfach als auch reibungslos funktionieren teste dein wissen übung welche eigenschaft eines eintrags gibt an ob das ziel aktuell innerhalb des root sichtbar ist welche eigenschaft eines eintrags gibt an ob das ziel aktuell innerhalb des root sichtbar ist entry isintersecting entry isvisible entry inviewport entry visible prüfen übung was ist der hauptgrund warum intersectionobserver einem scroll listener mit getboundingclientrect vorgezogen wird was ist der hauptgrund warum intersectionobserver einem scroll listener mit getboundingclientrect vorgezogen wird er prüft die sichtbarkeit asynchron und außerhalb des main threads und vermeidet so scroll jank es ist die einzige möglichkeit die position eines elements auszulesen er animiert elemente beim erscheinen automatisch er funktioniert nur in älteren browsern prüfen übung welche aussagen über die konstruktor optionen sind korrekt welche aussagen über die konstruktor optionen sind korrekt ein threshold von 1 löst nur aus wenn das element vollständig sichtbar ist root auf nu...