Search completed in 0.94 seconds.
IntersectionObserver.IntersectionObserver() - Web APIs
the
intersectionobserver() constructor creates and returns a new
intersectionobserver object.
... syntax var observer = new
intersectionobserver(callback[, options]); parameters callback a function which is called when the percentage of the target element is visible crosses a threshold.
... the callback receives as input two parameters: entries an array of
intersectionobserverentry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.
...And 3 more matches
IntersectionObserver - Web APIs
the
intersectionobserver interface of the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... when an
intersectionobserver is created, it's configured to watch for given ratios of visibility within the root.
... the configuration cannot be changed once the
intersectionobserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.
...And 10 more matches
IntersectionObserverEntry - Web APIs
the
intersectionobserverentry interface of the intersection observer api describes the intersection between the target element and its root container at a specific moment of transition.
... instances of
intersectionobserverentry are delivered to an
intersectionobserver callback in its entries parameter; otherwise, these objects can only be obtained by calling
intersectionobserver.takerecords().
... properties
intersectionobserverentry.boundingclientrect read only returns the bounds rectangle of the target element as a domrectreadonly.
...And 8 more matches
IntersectionObserver.observe() - Web APIs
the
intersectionobserver method observe() adds an element to the set of target elements being watched by the
intersectionobserver.
...to stop observing the element, call
intersectionobserver.unobserve().
... when the visibility of the specified element crosses over one of the observer's visibility thresholds (as listed in
intersectionobserver.thresholds), the observer's callback is executed with an array of
intersectionobserverentry objects representing the intersection changes which occurred.
...And 2 more matches
IntersectionObserver.thresholds - Web APIs
the
intersectionobserver interface's read-only thresholds property returns the list of intersection thresholds that was specified when the observer was instantiated with
intersectionobserver().
... syntax var thresholds =
intersectionobserver.thresholds; value an array of intersection thresholds, originally specified using the threshold property when instantiating the observer.
... if no threshold option was included when
intersectionobserver() was used to instantiate the observer, the value of thresholds is simply [0].
...And 2 more matches
IntersectionObserver.root - Web APIs
the
intersectionobserver interface's read-only root property identifies the element or document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target.
... syntax var root =
intersectionobserver.root; value a element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the target element is visible.
... the intersection of this bounding rectangle, offset by any margins specified in the options passed to the
intersectionobserver() constructor, the target element's bounds, minus the bounds of every element or other object which overlaps the target element, is considered to be the visible area of the target element.
... observer.root.style.border = "2px solid #44aa44"; specifications specification status comment intersection observerthe definition of '
intersectionobserver' in that specification.
IntersectionObserver.rootMargin - Web APIs
the
intersectionobserver interface's read-only rootmargin property is a string with syntax similar to that of the css margin property.
... syntax var marginstring =
intersectionobserver.rootmargin; value a string, formatted similarly to the css margin property's value, which contains offsets for one or more sides of the root's bounding box.
... the string returned by this property may not match the one specified when the
intersectionobserver was instantiated.
... specifications specification status comment intersection observerthe definition of '
intersectionobserver.rootmargin' in that specification.
IntersectionObserver.takeRecords() - Web APIs
the
intersectionobserver method takerecords() returns an array of
intersectionobserverentry objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback.
... syntax
intersectionobserverentries =
intersectionobserver.takerecords(); parameters none.
... return value an array of
intersectionobserverentry objects, one for each target element whose intersection with the root has changed since the last time the intersections were checked.
... examples <<<...>>> specifications specification status comment intersection observerthe definition of '
intersectionobserver.takerecords()' in that specification.
IntersectionObserver.unobserve() - Web APIs
the
intersectionobserver method unobserve() instructs the
intersectionobserver to stop observing the specified target element.
... syntax
intersectionobserver.unobserve(target); parameters target the element to cease observing.
... var observer = new
intersectionobserver(callback); observer.observe(document.getelementbyid("elementtoobserve")); /* ...
... */ observer.unobserve(document.getelementbyid("elementtoobserve")); specifications specification status comment intersection observerthe definition of '
intersectionobserver.unobserve()' in that specification.
IntersectionObserverEntry.isIntersecting - Web APIs
the
intersectionobserverentry interface's read-only isintersecting property is a boolean value which is true if the target element intersects with the intersection observer's root.
... if this is true, then, the
intersectionobserverentry describes a transition into a state of intersection; if it's false, then you know the transition is from intersecting to not-intersecting.
... syntax var isintersecting =
intersectionobserverentry.isintersecting; value a boolean value which indicates whether the target element has transitioned into a state of intersection (true) or out of a state of intersection (false).
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.isintersecting' in that specification.
IntersectionObserverEntry.rootBounds - Web APIs
the
intersectionobserverentry interface's read-only rootbounds property is a domrectreadonly corresponding to the target's root intersection rectangle, offset by the
intersectionobserver.rootmargin if one is specified.
... syntax var rootbounds =
intersectionobserverentry.rootbounds; value a domrectreadonly which describes the root intersection rectangle.
... this rectangle is offset by the values in
intersectionobserver.rootmargin.
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.rootbounds' in that specification.
IntersectionObserver.disconnect() - Web APIs
the
intersectionobserver method disconnect() stops watching all of its target elements for visibility changes.
... syntax
intersectionobserver.disconnect(); parameters none.
... specifications specification status comment intersection observerthe definition of '
intersectionobserver.disconnect()' in that specification.
IntersectionObserverEntry.boundingClientRect - Web APIs
the
intersectionobserverentry interface's read-only boundingclientrect property returns a domrectreadonly which in essence describes a rectangle describing the smallest rectangle that contains the entire target element.
... syntax var boundsrect =
intersectionobserverentry.boundingclientrect; value a domrectreadonly which describes the smallest rectangle that contains every part of the target element whose intersection change is being described.
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.boundingclientrect' in that specification.
IntersectionObserverEntry.intersectionRatio - Web APIs
the
intersectionobserverentry interface's read-only intersectionratio property tells you how much of the target element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0.
... syntax var intersectionratio =
intersectionobserverentry.intersectionratio; value a number between 0.0 and 1.0 which indicates how much of the target element is actually visible within the root's intersection rectangle.
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.intersectionratio' in that specification.
IntersectionObserverEntry.intersectionRect - Web APIs
the
intersectionobserverentry interface's read-only intersectionrect property is a domrectreadonly object which describes the smallest rectangle that contains the entire portion of the target element which is currently visible within the intersection root.
... syntax var intersectionrect =
intersectionobserverentry.intersectionrect; value a domrectreadonly which describes the part of the target element that's currently visible within the root's intersection rectangle.
... function intersectioncallback(entries) { entries.foreach(function(entry) { refreshzones.push({ element: entry.target, rect: entry.intersectionrect }); }); } specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.intersectionrect' in that specification.
IntersectionObserverEntry.target - Web APIs
the
intersectionobserverentry interface's read-only target property indicates which targeted element has changed its amount of intersection with the intersection root.
... syntax var target =
intersectionobserverentry.target; value the
intersectionobserverentry's target property specifies which element previously targeted by calling
intersectionobserver.observe() experienced a change in intersection with the root.
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.target' in that specification.
IntersectionObserverEntry.time - Web APIs
the
intersectionobserverentry interface's read-only time property is a domhighrestimestamp that indicates the time at which the intersection change occurred relative to the time at which the document was created.
... syntax var time =
intersectionobserverentry.time; value a domhighrestimestamp which indicates the time at which the target element experienced the intersection change described by the
intersectionobserverentry.
... specifications specification status comment intersection observerthe definition of '
intersectionobserverentry.time' in that specification.
Intersection Observer API - Web APIs
creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = new
intersectionobserver(callback, options); a threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
... intersection observer options the options object passed into the
intersectionobserver() constructor let you control the circumstances under which the observer's callback is invoked.
...once you have created the observer, you need to give it a target element to watch: let target = document.queryselector('#listitem'); observer.observe(target); // the callback we setup for the observer will be executed now for the first time // it waits until we assign a target to our observer (even if the target is currently not visible) whenever the target meets a threshold specified for the
intersectionobserver, the callback is invoked.
...And 17 more matches
Index - Web APIs
2178 intersection observer api api, clipping, intersection, intersection observer api,
intersectionobserver, overview, performance, reference, web the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... 2180
intersectionobserver api, experimental, interface, intersection observer api,
intersectionobserver, reference, observers provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... 2181
intersectionobserver.
intersectionobserver() api, constructor, intersection observer api,
intersectionobserver, reference, visibility, visible the
intersectionobserver() constructor creates and returns a new
intersectionobserver object.
...And 16 more matches
Timing element visibility with the Intersection Observer API - Web APIs
adobserver will hold our
intersectionobserver used to track the intersection between the ads and the <main> element's bounds.
...ng up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new
intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refreshintervalid = window.setinterval(handlerefreshinterval, 1000); } first, a reference to the content wrapping <main> element is obtained, so we can insert our content into it.
... next we set up the options for the
intersectionobserver which will monitor target elements (ads, in our case) for intersection changes relative to the document.
...And 6 more matches
Web APIs
idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger
intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimess...
Progressive loading - Progressive web apps (PWAs)
here's what the relevant code looks like: if('
intersectionobserver' in window) { const observer = new
intersectionobserver((items, observer) => { items.foreach((item) => { if(item.isintersecting) { loadimages(item.target); observer.unobserve(item.target); } }); }); imagestoload.foreach((img) => { observer.observe(img); }); } else { imagestoload.foreach((img) => { loadimages(img); }); } if the intersectiono...