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
83
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
90
Create instant loading mobile web pages with AMP
juanlizarazo
0
130
AMP - Accelerated Mobile Pages
juanlizarazo
0
37
Other Decks in Programming
See All in Programming
私はどうやって技術力を上げたのか
yusukebe
44
19k
CSC509 Lecture 05
javiergs
PRO
0
300
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
430
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
860
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
5
2.1k
Software Architecture
hschwentner
6
2.3k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
330
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
230
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
230
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Become a Pro
speakerdeck
PRO
29
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Bash Introduction
62gerente
615
210k
How to Think Like a Performance Engineer
csswizardry
27
2k
Rails Girls Zürich Keynote
gr2m
95
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Typedesign – Prime Four
hannesfritz
42
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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