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
79
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
180
Dom manipulation in web workers: The future of your mobile web apps
juanlizarazo
0
87
Create instant loading mobile web pages with AMP
juanlizarazo
0
120
AMP - Accelerated Mobile Pages
juanlizarazo
0
34
Other Decks in Programming
See All in Programming
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
11
3.3k
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
3.2k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
410
Identifying and Analyzing Fake OSS with Malware - fukuoka.go#21
rhykw
0
520
List とは何か? / PHPerKaigi 2025
meihei3
0
220
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
410
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Compose Navigation実装の見通しを良くする
hiroaki404
0
170
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
110
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
780
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
360
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
100
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Automating Front-end Workflow
addyosmani
1369
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to Ace a Technical Interview
jacobian
276
23k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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