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
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
550
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
560
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
990
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
320
技術同人誌をMCP Serverにしてみた
74th
1
680
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
AIともっと楽するE2Eテスト
myohei
7
2.9k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
830
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
116
6.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How to Ace a Technical Interview
jacobian
278
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Statistics for Hackers
jakevdp
799
220k
Writing Fast Ruby
sferik
628
62k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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