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
楽して成果を出すためのセルフリソース管理
clipnote
0
180
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
AI時代のUIはどこへ行く?
yusukebe
18
9k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
print("Hello, World")
eddie
2
530
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
AIコーディングAgentとの向き合い方
eycjur
0
280
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
140
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
為你自己學 Python - 冷知識篇
eddie
1
350
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Code Reviewing Like a Champion
maltzj
525
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Writing Fast Ruby
sferik
628
62k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Navigating Team Friction
lara
189
15k
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