Scribd
Upload
10 views

What is the Intersection Observer API

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

What is the Intersection Observer API

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Salesforce Enthusiasts

WHAT IS THE
INTERSECTION
OBSERVER
API?
Salesforce Enthusiasts

THE INTERSECTION
OBSERVER API ALLOWS YOU
TO EFFICIENTLY DETECT
WHEN AN ELEMENT ENTERS
OR LEAVES THE BROWSER’S
VIEWPORT. RATHER THAN
CONSTANTLY
RECALCULATING ELEMENT
POSITIONS ON SCROLL OR
RESIZE EVENTS (WHICH CAN
BE CPU-INTENSIVE), THE
OBSERVER NOTIFIES YOU
ONLY WHEN VISIBILITY
CHANGES OCCUR—
LEADING TO MORE
RESPONSIVE AND
PERFORMANT
APPLICATIONS.
Salesforce Enthusiasts

Key Benefits
LAZY LOADING: DEFER LOADING OF
HEAVY IMAGES OR CONTENT UNTIL
THEY BECOME VISIBLE TO THE USER,
IMPROVING INITIAL LOAD TIMES.
INFINITE SCROLLING: SEAMLESSLY
ADD CONTENT AS THE USER
SCROLLS DOWN, WITHOUT MANUAL
CALCULATIONS OR HEAVY LOOPS.
PERFORMANCE BOOST: ELIMINATE
THE NEED FOR CONSTANT EVENT
HANDLERS, REDUCING CPU
OVERHEAD.
BETTER UX: PROVIDE DYNAMIC
ANIMATIONS OR EFFECTS ONLY
WHEN ELEMENTS COME INTO VIEW,
CREATING AN ENGAGING AND USER-
FRIENDLY EXPERIENCE.
Salesforce Enthusiasts

How it Works

INTERSECTIONOBSERVER
CONSTRUCTOR: DEFINES A
CALLBACK THAT RUNS WHEN
VISIBILITY CHANGES MEET CERTAIN
THRESHOLDS (0.1 MEANS AT LEAST
10% OF THE ELEMENT IS VISIBLE).
RENDEREDCALLBACK: ENSURES THE
DOM ELEMENTS ARE AVAILABLE
BEFORE ATTACHING OBSERVERS.
LAZY LOADING: ONCE THE ELEMENT
IS IN VIEW, WE UPDATE THE IMAGE’S
SRC WITH THE ACTUAL URL, AND
UNOBSERVE IT TO AVOID RE-
CHECKING.
Salesforce Enthusiasts

You might also like