Lazy-Loaded Images - Code This, Not That

  Рет қаралды 89,251

Fireship

Fireship

Күн бұрын

Code this 💪, not that 💩. Learn how to use IntersectionObserver to lazy-load images efficiently in the browser without listening to the scroll event fireship.io/snippets/intersec...
API developer.mozilla.org/en-US/d...

Пікірлер: 241
@gerritweiermann79
@gerritweiermann79 5 жыл бұрын
Thanks for the new thing that will be stored in my head somewhere :D I really like the Code This Not That series. Please continue doing this!
@ImperiumLibertas
@ImperiumLibertas 5 жыл бұрын
Absolutely outstanding quality. Thanks again Jeff!
@ArabianAK
@ArabianAK 5 жыл бұрын
Found your channel recently and I love it! Keep on keeping on.
@SprHero
@SprHero 5 жыл бұрын
I didn't know this existed. Thanks for the clear and to the point video! Looking forward to your next one 😉
@Fireship
@Fireship 5 жыл бұрын
Nice, it's one of my favs :)
@LOOTS243
@LOOTS243 5 жыл бұрын
@@Fireship easy thread gains 💪💪
@islamibrahim8121
@islamibrahim8121 2 жыл бұрын
Me too haha. I just watched the react one and this popped up. Quite the Gem too. I always avoided these flashy browser API because of support. Guess I'll be having fun with the observer and the polyfill
@solifuse8079
@solifuse8079 2 жыл бұрын
Brilliant! I really needed this guide, really helped make my code become more efficient; in fact, this whole series "Code This Not That" is amazing!
@isaacdiaby
@isaacdiaby 5 жыл бұрын
Fire ship🔥 actually love your videos, it gets to the point and just teaches you what you need to know. I needed this for my app, huge thanks man
@Fireship
@Fireship 5 жыл бұрын
Great to hear, thanks for watching!
5 жыл бұрын
Absolutely love all of our videos Jeff! Thanks for your hard work and thanks for being amazing.
@Fireship
@Fireship 5 жыл бұрын
Thank you Kevin :)
@nicholassaephanh4407
@nicholassaephanh4407 5 жыл бұрын
Dude I haven't touched code in a while and you make me hyped up to code lol. This is SO good.
@chriswindsor1417
@chriswindsor1417 5 жыл бұрын
Great video! Love this kind of content. You explain everything so effectively and timely.
@Blagel97
@Blagel97 5 жыл бұрын
Really thorough walkthrough! Love your vids man
@RahulSingh-rr9hx
@RahulSingh-rr9hx 2 жыл бұрын
Thanks dude, for not making 20000000000mins long video with unnecessary explanation. Thanks for keeping it Lit 🔥🔥
@salmanwap
@salmanwap 5 жыл бұрын
This is first time I am watching your video. And within 10 seconds I subscribed to your channel. I am coding that for a long time, now I am starting to code this not that. Thanks for the video.
@kangqian8288
@kangqian8288 5 жыл бұрын
Always love your channel on angular typescript :)
@akashrajpurohit97
@akashrajpurohit97 5 жыл бұрын
I like this 'Code this, Not that' section alot.. keep em coming🙌
@belahcenebenzaratahar5708
@belahcenebenzaratahar5708 5 жыл бұрын
Thank you for not wasting my time! short and yet covering it all.
@zeeshanmh215
@zeeshanmh215 5 жыл бұрын
Very clear and concise tutorial. Waiting for more like this 😍
@themindstorm9947
@themindstorm9947 5 жыл бұрын
Thanks for all these tutorials!
@FinlayDaG33k
@FinlayDaG33k 5 жыл бұрын
This is a really nice thing that I did not consider myself yet. I've opened a ticket/issue on my own website repo so I'll have a look at it later again when the time is right. Keep up the good work!
@PaurakhSharma
@PaurakhSharma 5 жыл бұрын
Thank you for these amazing videos.
@markopantovic1865
@markopantovic1865 Жыл бұрын
This video is amazing mate! Thank you for this quality content. Keep it up!
@freeeedl
@freeeedl 5 жыл бұрын
Thx for all your stuff. I like your style and also listen to your voice ^^
@SurendraSinghChhabra
@SurendraSinghChhabra 5 жыл бұрын
Really short and simple video. Thanks !!
@SamuelCamargo1000
@SamuelCamargo1000 5 жыл бұрын
Thanks for this subject. Added a lot to my dev repository knowledge.
@naga2054
@naga2054 5 жыл бұрын
Thanks Jeff as usual great video. My expectation from you is always #LearnWhatYouDontKnow 😍
@jijinp1612
@jijinp1612 5 жыл бұрын
Short and Useful stuff. Thank A lot
@pb1431985
@pb1431985 5 жыл бұрын
Quick demo and useful information that can be implemented in any real life project
@srukshan98
@srukshan98 5 жыл бұрын
This is awesome! Didn't know that it is that easy... Thank you for this amazing video
@johnjoseph8294
@johnjoseph8294 5 жыл бұрын
Once again great tutorial. Hat off to you men!
@mastercode7851
@mastercode7851 4 жыл бұрын
you are amazing , i would love a full project from you hopefully
@nasrmgk
@nasrmgk 5 жыл бұрын
Awesome channel with useful informations
@saadabbasi2063
@saadabbasi2063 5 жыл бұрын
I appreciate that you changed your videos thumbnail, seems like everybody started using similar to what you had previously. 😃
@Fireship
@Fireship 5 жыл бұрын
I know, I see that design everywhere now. This design is harder to copy :)
@adriandinca5682
@adriandinca5682 5 жыл бұрын
Thank so much for mentioning that quicklink library
@danielsimionescu298
@danielsimionescu298 5 жыл бұрын
Thank you so much! Exactly what I was looking for 😄
@didimedina4858
@didimedina4858 5 жыл бұрын
Wow this is great! Going to spend sometime tinkering with this and animejs this upcoming weekend :)
@SoundFilmDesign
@SoundFilmDesign 5 жыл бұрын
Awesome video.. and awesome shirt!
@The-Average-Gamer
@The-Average-Gamer 5 жыл бұрын
Awesome topic, please do more
@zidalo
@zidalo 5 жыл бұрын
Great video! I want that t-shirt!
@ashwinshenoy6360
@ashwinshenoy6360 5 жыл бұрын
Your firebase related stuff is really good.
@AungBaw
@AungBaw 5 жыл бұрын
Super crisp quality 🔥 fireship shirt yes!
@firaskudsy
@firaskudsy 5 жыл бұрын
U keep posting amazing videos.. 🙌
@balajkhan9894
@balajkhan9894 5 жыл бұрын
Love your content to the point 👍
@jensbienias1157
@jensbienias1157 5 жыл бұрын
This is so helpful. Thanks a lot!
@mateja176
@mateja176 5 жыл бұрын
Such an outstanding ambassador of JavaScript 👑
@satajyotidhawa4937
@satajyotidhawa4937 5 жыл бұрын
Awsome video.its helps me to learn this new thing
@ezeeok
@ezeeok 5 жыл бұрын
Love this series!
@giancarlosisasi4137
@giancarlosisasi4137 5 жыл бұрын
Awesome video, thanks a lot!
@idlevandal69
@idlevandal69 5 жыл бұрын
This is a game changer.. I usually avoid scrolling animations, not anymore!!!
@scottmccartney1518
@scottmccartney1518 5 жыл бұрын
Great video, been looking to implement Angular Material's scrolling soon!
@polinistinga1
@polinistinga1 5 жыл бұрын
Awesome work!
@vysanthskurup4374
@vysanthskurup4374 5 жыл бұрын
Excellent explanation 👍
@divinedela9125
@divinedela9125 5 жыл бұрын
Tnx Jeff.. great video as always
@ssikarim
@ssikarim Жыл бұрын
The video was very useful for me. thanks
@nickstrands
@nickstrands 5 жыл бұрын
This is so useful to me right now !
@amirfawzy1147
@amirfawzy1147 5 жыл бұрын
first time to know that there's something called IntersectionObserver in javascript ... very good tip and efficient
@karsongrady
@karsongrady 5 жыл бұрын
Thank you! Great video. I like the vanilla javascript videos
@Fireship
@Fireship 5 жыл бұрын
Thank you, I'll be making one of these every couple weeks.
@chellappanv2281
@chellappanv2281 5 жыл бұрын
Thanks for the great video!!!
@FauzulChowdhury
@FauzulChowdhury 5 жыл бұрын
Hi Jeff, I have learnt so much from you and about angular and firebase. I was hoping if you could find your time to make a video on angular search engine crawlabilty and server side rendering technique? This would really boost my confidence. Thank you.
@sivuyilemagutywa5286
@sivuyilemagutywa5286 5 жыл бұрын
I don't know why I always press like before even watching your videos. Is it because your videos are short and straight to the point --> Yes Or clear and Clean --> Yes Or no unnecessary boilerplate --> Yes Or your content is unmatched --> Yes I guess I will never know
@Shashank.Shinde
@Shashank.Shinde 5 жыл бұрын
I learned a lot firebase stuff from you
@MercyFromOverwatch2
@MercyFromOverwatch2 2 жыл бұрын
Jeff is my favourite tech youtuber!
@vellengaming
@vellengaming 5 жыл бұрын
Great video thank you sir!
@elmotareal
@elmotareal 5 жыл бұрын
Damn! Man! This was a "mic drop" quality video :)
@natanfourie
@natanfourie 5 жыл бұрын
Nice to know this trick 🙂👌
@thepotatokitty
@thepotatokitty 5 жыл бұрын
I was browsing through KZfaq for some angular tutorials, found you... Best channel for the angular and firebase tutorial, coz ur video contains quality content not 💩 :-P
@BytesAndBrackets
@BytesAndBrackets 5 жыл бұрын
Amazing.. never knew it before
@25isfunnierthan24
@25isfunnierthan24 5 жыл бұрын
Wow that's awesome! Didn't know that even existed
@just0for0adult
@just0for0adult 5 жыл бұрын
Thanks for the knowledge shared
@MyIvanch
@MyIvanch 5 жыл бұрын
I love your content !
@anawhite2562
@anawhite2562 4 жыл бұрын
Jeez, I think this is literally the first time I had to set speed at 0.75. Usually, I watch at 1.5 - 2. Still, thanks. Subscribed
@Fireship
@Fireship 4 жыл бұрын
Welcome to the channel!
@ZachInSpace
@ZachInSpace 5 жыл бұрын
Love it, thank you!
@brahim_boussadjra
@brahim_boussadjra 5 жыл бұрын
however i'm Vue js developer but i love your videos since they're of high quality
@giangonzaga4900
@giangonzaga4900 5 жыл бұрын
Wonderful thumbnail!
@misopetrik
@misopetrik 2 жыл бұрын
Great video!
@lutaseb
@lutaseb 5 жыл бұрын
did implement infinite scroll using the magical exaustMap() operator of rxjs, it worked like a charm, but did not have any images needing lazy loading or stuff. Thanks for your videos which just the best on youtube
@amritgupta1792
@amritgupta1792 5 жыл бұрын
You guys are awesome
@boradmay
@boradmay 5 жыл бұрын
Very helpful. Just know this api.
@dwscheng
@dwscheng 5 жыл бұрын
Great content!!!
@sourishdutta9600
@sourishdutta9600 4 жыл бұрын
This one is amazing!! Thanks man!! Can you please make one video that how we can preserve the scroll position of a page. Like in medium app it redirects us to that perticular position where we stop reading one article and very smooth transition was there how to achieve this in js and angular. Thanks a lot. You are awesome. Will be waiting for more.
@elliotheath5366
@elliotheath5366 5 жыл бұрын
Good stuff, Jeff!
@Shivamethical
@Shivamethical 5 жыл бұрын
Hi I found a minor improvement for the same code when we are writting bad code that time - const src = img.getAttribute('data-lazy'); if(src) { // null check here img.setAttribute('src', src); img.classList.add('fade'); } If we dont check null so it will make null network requests . :) Thanks very useful contents.
@aarond309
@aarond309 Жыл бұрын
I know this is an *old* comment, but fyi, you could also modify the original query selector to “img[data-lazy]” to ensure that every image received has a data-lazy property(though a null check is still good in case it changes somehow after attaching the listener).
@Shivamethical
@Shivamethical Жыл бұрын
@@aarond309 Yeah Good.
@harshitjoshi3082
@harshitjoshi3082 5 жыл бұрын
The t shirt looks good !
@mendisterenfeld2668
@mendisterenfeld2668 5 жыл бұрын
Great video.
@devangrojasara9080
@devangrojasara9080 5 жыл бұрын
Awesome Videos
@divanvanbiljon7603
@divanvanbiljon7603 5 жыл бұрын
Awesome shirt!
@hectorr.cobian1020
@hectorr.cobian1020 5 жыл бұрын
Damn boi, thanks for the video
@monsieurBoutte
@monsieurBoutte 4 жыл бұрын
Beautiful
@antlemec
@antlemec 5 жыл бұрын
finally understood what lazy loading is ...
@lj004
@lj004 5 жыл бұрын
Thanks as always!
@vaibhav1180
@vaibhav1180 5 жыл бұрын
Now it's supported in both Safari and iOS Safari, Cheers!
@JefersonLimaAlmeida
@JefersonLimaAlmeida 5 жыл бұрын
Thank you, for the good video :)
@felixdorrschuck910
@felixdorrschuck910 5 жыл бұрын
Thanks alot!
@nuwang1
@nuwang1 5 жыл бұрын
Love it thank you. I use gatsby for most of this but good to know for when I'm not using gatsby!
@abhik474
@abhik474 4 жыл бұрын
thanks for this
@peoplethesedaysberetarded
@peoplethesedaysberetarded 5 жыл бұрын
Hmm. It’s clear that I’ll have to look and see if I can roll this into GatsbyJS. I’ve got a small upcoming project that’s image-heavy (30+ images, SPA, SSR for analytics, content editing by the client via headless CMS).
@Fireship
@Fireship 5 жыл бұрын
FYI there are also packages that do all the work for you www.npmjs.com/package/vanilla-lazyload
@joedyer1989
@joedyer1989 4 жыл бұрын
Awesome tut! I just wondered what the difference between/what's best to use - the unobserve or the disconnect method?
@carlosalfredo657
@carlosalfredo657 5 жыл бұрын
Excellent
@AmanNidhi
@AmanNidhi 5 жыл бұрын
this are useful videos. thanks for creating it. Can you also create a playlist so that the videos are easily available and sequential order. This playlist might help help in understanding the nuance of javascript and web development
@Fireship
@Fireship 5 жыл бұрын
Thank you, yes I'll do that now that there are a few of them.
@rithinprakash5045
@rithinprakash5045 5 жыл бұрын
Always sharp
@ikezedev
@ikezedev 5 жыл бұрын
Liked before I watched it.... And when I did watch it, I wanted to love it but KZfaq hasn't got any love button.... 😍
@Fireship
@Fireship 5 жыл бұрын
WINNER! Congrats, direct message me with your address and shirt size :)
@ikezedev
@ikezedev 5 жыл бұрын
@@Fireship Thanks boss 😍 Name: Eze Kingsley Ikechukwu Address: Department of Geology, University of Nigeria Nsukka (UNN), P.O. Box 3236, Nsukka 410001, Enugu State, NIGERIA. Shirt size: XXL
@r4t40
@r4t40 5 жыл бұрын
Nice job
RxJS Top Ten - Code This, Not That
14:44
Fireship
Рет қаралды 252 М.
React Intersection Observer (scroll + lazy-load  картинок)
22:10
Always be more smart #shorts
00:32
Jin and Hattie
Рет қаралды 43 МЛН
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 10 МЛН
Дибала против вратаря Легенды
00:33
Mr. Oleynik
Рет қаралды 4,5 МЛН
Я нашел кто меня пранкует!
00:51
Аришнев
Рет қаралды 2,8 МЛН
Marker Interface in Java (In Hindi) | Pradeep Nailwal
4:03
Lets Make Automation Easy - Pradeep Nailwal
Рет қаралды 2
Lazy loading is too easy now
16:05
Kevin Powell
Рет қаралды 146 М.
10 regrets of experienced programmers
8:16
Fireship
Рет қаралды 1,1 МЛН
JavaScript: How It's Made
10:54
Fireship
Рет қаралды 871 М.
Lazy Loading Images with NO SCRIPTS!  (HTML only)
5:49
Hussein Nasser
Рет қаралды 19 М.
Build 5 Apps in 5 Minutes with Flutter… But should you?
8:53
This Is Unbelievably Powerful
11:15
Web Dev Simplified
Рет қаралды 100 М.
Learn Intersection Observer In 15 Minutes
15:32
Web Dev Simplified
Рет қаралды 321 М.
WebSockets in 100 Seconds & Beyond with Socket.io
8:31
Fireship
Рет қаралды 973 М.
JavaScript Pro Tips - Code This, NOT That
12:37
Fireship
Рет қаралды 2,5 МЛН
ИГРОВОВЫЙ НОУТ ASUS ЗА 57 тысяч
25:33
Ремонтяш
Рет қаралды 320 М.
Hisense Official Flagship Store Hisense is the champion What is going on?
0:11
Special Effects Funny 44
Рет қаралды 2,6 МЛН
cute mini iphone
0:34
승비니 Seungbini
Рет қаралды 6 МЛН