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
81
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
89
Create instant loading mobile web pages with AMP
juanlizarazo
0
130
AMP - Accelerated Mobile Pages
juanlizarazo
0
36
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PicoRuby on Rails
makicamel
2
130
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Hack Claude Code with Claude Code
choplin
4
2k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.7k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
効率的な開発手段として VRTを活用する
ishkawa
0
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Navigating Team Friction
lara
187
15k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Done Done
chrislema
184
16k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1370
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
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