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
72
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
160
Dom manipulation in web workers: The future of your mobile web apps
juanlizarazo
0
75
Create instant loading mobile web pages with AMP
juanlizarazo
0
100
AMP - Accelerated Mobile Pages
juanlizarazo
0
30
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
500
Elm 0.19.0 Changes
bkuhlmann
0
510
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
新宿ダンジョンを可視化してみた
satoshi7190
3
390
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
VS Code をプロダクトにどう取り込むか
onomax
1
660
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
2 週間で Twitter Bot を作ってみた
contour_gara
0
770
Domain-Driven Transformation
hschwentner
2
1.5k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Adopting Sorbet at Scale
ufuk
69
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
The Language of Interfaces
destraynor
151
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Git: the NoSQL Database
bkeepers
PRO
423
63k
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