Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lazy loading images With the intersection observer
Search
Juan
November 06, 2018
Programming
0
83
Lazy loading images With the intersection observer
Juan
November 06, 2018
Tweet
Share
More Decks by Juan
See All by Juan
An exciting intro to JavaScript unit testing
juanlizarazo
1
190
Dom manipulation in web workers: The future of your mobile web apps
juanlizarazo
0
90
Create instant loading mobile web pages with AMP
juanlizarazo
0
130
AMP - Accelerated Mobile Pages
juanlizarazo
0
37
Other Decks in Programming
See All in Programming
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
CSC509 Lecture 06
javiergs
PRO
0
260
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
contribution to astral-sh/uv
shunsock
0
450
チームの境界をブチ抜いていけ
tokai235
0
210
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
880
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
Featured
See All Featured
Visualization
eitanlees
149
16k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Site-Speed That Sticks
csswizardry
13
920
Producing Creativity
orderedlist
PRO
347
40k
A Tale of Four Properties
chriscoyier
161
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Being A Developer After 40
akosma
91
590k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Transcript
LAZY LOADING IMAGES WITH THE INTERSECTION OBSERVER SLC Front end
DEV
I ❤ • OPEN SOURCE @AMPHTML • INSTRUCTOR @UDEMY •
ENGINEERING @IMPARTNERPRM • !" @juanlizarazog HI! I AM JUAN LIZARAZO
@juanlizarazog AMPPROJECT.ORG BUILDING THE FUTURE WEB, TOGETHER. THE AMP PROJECT
@juanlizarazog What’s lazy loading?
@juanlizarazog Bounce rate
@juanlizarazog
PERFORMANCE MATTERS! @juanlizarazog
LAZY LOADING RESOURCES MATTER! @juanlizarazog
@juanlizarazog Our Goal Complete first meaningful render under 1 second
Image Lazy loading @juanlizarazog
@juanlizarazog No. 1 Element.getClientBoundingRect()
@juanlizarazog const domRect = element.getBoundingClientRect(); { "x": 418.4375, "y": 172,
"width": 923.328125, "height": 44, "top": 172, "right": 1341.765625, "bottom": 216, "left": 418.4375 }
@juanlizarazog DOMRect is just a rectangle
@juanlizarazog element.getBoundingClientRect(); 1. element.getClientRects(); 2. Returns a DOMRectList 3. Returns
the union of these rectangles which is the DOMRect returned by element.getBoundingClientRect(); * Amount of scrolling matters
@juanlizarazog VIEW PORT
@juanlizarazog Let’s see it
@juanlizarazog No. 2 new IntersectionObserver(callback, options);
@juanlizarazog IntersectionObservers let you know when an observed element enters
or exits the browser’s viewport.
@juanlizarazog const options = { root: null, rootMargin: '0px', threshold:
0 } const observer = new IntersectionObserver( callback, options );
@juanlizarazog That’s it, so let’s see it
@juanlizarazog Love your users ❤
@juanlizarazog Thank you! Source code: https://github.com/juanlizarazo/image-lazy-load-demos Slides: https://speakerdeck.com/juanlizarazo/lazy-loading-images-with-the-intersection-observer