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
1から理解するWeb Push
dora1998
7
1.9k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
為你自己學 Python - 冷知識篇
eddie
1
350
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.3k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
速いWebフレームワークを作る
yusukebe
5
1.7k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
RDoc meets YARD
okuramasafumi
4
170
Ruby Parser progress report 2025
yui_knk
1
440
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Scaling GitHub
holman
463
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Producing Creativity
orderedlist
PRO
347
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Rails Girls Zürich Keynote
gr2m
95
14k
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