Lazy loading JS by visibility

Created: 2023-02-06T21:37:27-06:00

Return to the Index

This card pertains to a resource available on the internet.

• Insert a script at the end of the page so it will not run until the entire page has downloaded.
• The script registers an observer to run a callback whenever a given div comes on to the screen.
• The observer causes the javascript for the site to be downloaded and activated only when that section has come in to view.

<div data-astro-id="3459833264469372"></div>
<script type="module">

/* scaffolding put before the code */
((o=new IntersectionObserver((([{isIntersecting,target}])=>{isIntersecting&&(o.disconnect(),

/* code run when the section is visible */
Promise.all([
import('https://cdn.skypack.dev/react'),
import('https://cdn.skypack.dev/react-dom'),
]).then( ([
{ default: React },
{ default: ReactDOM },
]) => ReactDOM.render(
React.createElement('strong', {},
'This was rendered with React!',
),
target,
) )

/* scaffolding put after the code */
)})))=>{o.observe(document.querySelector('[data-astro-id="3459833264469372"]'))})()
</script>