This was really helpful. Now all I need to do is figure out how to “unload” some of the old content that has been scrolled past so that the site doesn’t get bogged down.
Found your channel yesterday, watched through a couple of your videos and already subscribed. It's an absolute gem and criminally underrated! However, for lazy loading images, I'd suggest using the Intersection Observer API instead of a Scroll-EventListener. Whereas the latter is called infinitely whenever the page is being scrolled, an Intersection Observer is only ever called once whenever a certain element is intersected (and can also be disconnected when no longer needed). I think you used to need a polyfill for Safari browsers, however, according to caniuse, the API is meanwhile supported.
But if we keep on adding images Innova root element then would it not create like there will be infinite images in our page and they will create the problem in the performance
Hello! Please I wanted to ask if you know of any fix for infinite scroll working on mobile phone browsers. I just tested the code, but it doesn't seem to work on chrome mobile browser and is not consistent on firefox browser. I will appreciate your feedback. Thanks
Awsome video, really "down to the earth" explanation, I have definently subscribed :-) .. I was looking for the video you say in the video that would come at a later point, explaining how to add a loading function, but I cannot seem to find it?
THANK YOU! Yeah it works but i have a problem. In the first line of JS is showing an error like (i wrote (const column = document.querySelector('.column') ) and its an error -> Parsing error: The keyword 'const' is reserved :/
@@karina.kiraz99 Can you post your code on codepen? I'm not sure why you're getting the error. I don't see a problem with using the "const" keyword based on your example.
facebook and the others you mentioned doesn't actually have "infinite scroll", since they simply grab content from a database and add it into the body. The quickest way to know if an application has infinite scroll is, if you scroll to the very top and still continue to scroll upwards, new content should be added to the top of the page until you stop scrolling.
🎓 New Course Available! "Scrollytelling 101": store.thecodecreative.com/scrollytelling
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/google-secrets-cheat-sheet
This is explained so cleanly and simply... love it!
Glad it helped!
Join "The Code Creative Community" group on Facebook: facebook.com/groups/thecodecreative
Simple and elegant explanation!
Thanks. ❤
Glad you liked it!
Your a champion of teaching. I really appreciate your work!
I appreciate that!
The best explanation i ever got!! BEST VIDEO
Glad it helped!
Finally after 3 hr I find the solution
Thank You SO much
Hi Tirth, glad to hear it! Feel free to subscribe if you like. I've got a bunch of new videos coming soon 👍🏻
Found a clear and super easy implementation of Infinite Scroll after 2 days. Thanks man!
Great to hear!
This is awesome, perfect explantion. Saw before this video something on MDN was much more complicated.
Glad it helped!
0 dislikes, that's shows the quality of content, thanks man
Thanks for watching! 👍🏻
This was one of the most easiest solution I could find..thanks so much :)
You're welcome Nasreen, thanks for watching!
Wow, friend suggested an api for this, but this seems so much more simple!
Great!! I loved the way you narrated the whole stuff in an easy way....waiting for the next video....
Thanks Amit, new videos coming each week!
To subscribe to the channel: ua-cam.com/channels/mOpHGj4JRWCdXhllVTZCVw.html
thank you!!! finally learned how Infinite Scroll works!!! thank you!
Great! Thanks for watching!
Dont stop making tutorials, very nicely explained. Thank you
Thanks Sudharshan, more to come!
Simple and thorough. Thank you!
Great, thanks Rajat!
Amazing tutorial! Very Simple Easy And Informative! Keep up the good work!
Thanks, will do!
Your tutorial is just amazing bro 😍
👍🏻👊🏻
that was really amazing explanation on scroll!!
thanks a lot!🙌
Glad you enjoyed it! If you want more videos on scrolling, here's a playlist for you: ua-cam.com/play/PLMPgoZdlPumenunSVF3n9Z4Uil13vcH5o.html
@@TheCodeCreative that's really amazing! Thanks alot ser!
your teaching style is really what makes the difference and i loved it.
@@yashsolanki069 👍🏻👍🏻👍🏻
crystal clear, thank you sir.
Glad to hear that!
What a clean explanation, just subscribed right away! I wish you success. I'll check your other videos too. 😊🖤
Great, thanks for watching!
This was really helpful. Now all I need to do is figure out how to “unload” some of the old content that has been scrolled past so that the site doesn’t get bogged down.
Glad to hear! Thanks for watching!
Perfect! Keep going sir.
Thanks, more coming soon!
Found your channel yesterday, watched through a couple of your videos and already subscribed. It's an absolute gem and criminally underrated!
However, for lazy loading images, I'd suggest using the Intersection Observer API instead of a Scroll-EventListener.
Whereas the latter is called infinitely whenever the page is being scrolled, an Intersection Observer is only ever called once whenever a certain element is intersected (and can also be disconnected when no longer needed). I think you used to need a polyfill for Safari browsers, however, according to caniuse, the API is meanwhile supported.
Great explanation
Glad to hear, thanks for watching!
But if we keep on adding images Innova root element then would it not create like there will be infinite images in our page and they will create the problem in the performance
Hi Prashant, yes, of course. As I mention in the video, this demonstrates the basic concept which you can then further develop and optimize.
Can i copy the code for myself and see if it works for me? I tried using the same url for the avatar images and it doesnt work for me.
Someone else had mentioned that the avatar API was no longer active unfortunately. But, hopefully, you can try the same code using a different API.
Great Work !! Just curious to know which font you are using?
Thanks Prashant! It's called Fira Code.
Gem to the development society
Thank you!
Can you make video real world questions like comments system,advance filter ,folder structure etc please... these were asked in interviews
Thanks for the suggestions 👍🏻
Hello the creative code,
Very cool tutorial.
May you please make an other tuto using MySQL and PHP ?
I will try!
Hello! Please I wanted to ask if you know of any fix for infinite scroll working on mobile phone browsers. I just tested the code, but it doesn't seem to work on chrome mobile browser and is not consistent on firefox browser. I will appreciate your feedback. Thanks
Awsome video, really "down to the earth" explanation, I have definently subscribed :-) .. I was looking for the video you say in the video that would come at a later point, explaining how to add a loading function, but I cannot seem to find it?
Hi Stig, thanks! I might not have gotten to make that video you mention yet but I'm gonna reconsider it now :-)
@@TheCodeCreative That would be really great .. maybe perhaps combined with an example where loading JSON? :-)
@@TheCodeCreative ,
Your content is very good. But that api is no longer exist. Could you please provide new one. Thanks in advance! :)
@@iamvikasrathod Thanks Vikas, I'll look into that!
THANK YOU! Yeah it works but i have a problem. In the first line of JS is showing an error like (i wrote (const column = document.querySelector('.column') ) and its an error -> Parsing error: The keyword 'const' is reserved :/
Are you getting this from ESLint?
@@TheCodeCreative i didn't check that.. what can be a problem in ESlint? (Brackets)
@@karina.kiraz99 Can you post your code on codepen? I'm not sure why you're getting the error. I don't see a problem with using the "const" keyword based on your example.
@@TheCodeCreative hope you will help me :D maybe i just made some mistaces in my code, cause pictures(infinite scroll) are not showing good :/
@@karina.kiraz99 Post up your code on codepen and I'll take a look
thank you
Thanks for watching!
adorable avatar site ain't giving accessing...can anyone help???
facebook and the others you mentioned doesn't actually have "infinite scroll", since they simply grab content from a database and add it into the body. The quickest way to know if an application has infinite scroll is, if you scroll to the very top and still continue to scroll upwards, new content should be added to the top of the page until you stop scrolling.
So in essence, this video like most others don't show actual infinite scroll and is thus misleading.
Fantastique
Thanks for watching!
COME MY HOME AND TEACH ME ME AS I AM LORD ABHISHEK, LORD OF ENTIRE UNIVERSE
loved it
👍🏻👍🏻👍🏻
Excellent job!
Thanks for watching!
thank you
Thanks for watching! Let me know what other topics you'd like to see covered.