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
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?
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
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
This is explained so cleanly and simply... love it!
Glad it helped!
Simple and elegant explanation!
Thanks. ❤
Glad you liked it!
Join "The Code Creative Community" group on Facebook: facebook.com/groups/thecodecreative
The best explanation i ever got!! BEST VIDEO
Glad it helped!
Your a champion of teaching. I really appreciate your work!
I appreciate that!
0 dislikes, that's shows the quality of content, thanks man
Thanks for watching! 👍🏻
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/google-secrets-cheat-sheet
Found a clear and super easy implementation of Infinite Scroll after 2 days. Thanks man!
Great to hear!
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 👍🏻
Dont stop making tutorials, very nicely explained. Thank you
Thanks Sudharshan, more to come!
To subscribe to the channel: ruclips.net/channel/UCmOpHGj4JRWCdXhllVTZCVw
This was one of the most easiest solution I could find..thanks so much :)
You're welcome Nasreen, thanks for watching!
thank you!!! finally learned how Infinite Scroll works!!! thank you!
Great! Thanks for watching!
This is awesome, perfect explantion. Saw before this video something on MDN was much more complicated.
Glad it helped!
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!
Simple and thorough. Thank you!
Great, thanks Rajat!
Wow, friend suggested an api for this, but this seems so much more simple!
Amazing tutorial! Very Simple Easy And Informative! Keep up the good work!
Thanks, will do!
crystal clear, thank you sir.
Glad to hear that!
Perfect! Keep going sir.
Thanks, more coming soon!
Your tutorial is just amazing bro 😍
👍🏻👊🏻
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!
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: ruclips.net/p/PLMPgoZdlPumenunSVF3n9Z4Uil13vcH5o
@@TheCodeCreative that's really amazing! Thanks alot ser!
your teaching style is really what makes the difference and i loved it.
@@yashsolanki069 👍🏻👍🏻👍🏻
Great Work !! Just curious to know which font you are using?
Thanks Prashant! It's called Fira Code.
Great explanation
Glad to hear, thanks for watching!
Gem to the development society
Thank you!
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.
thank you
Thanks for watching! Let me know what other topics you'd like to see covered.
Hello the creative code,
Very cool tutorial.
May you please make an other tuto using MySQL and PHP ?
I will try!
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 👍🏻
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.
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.
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!
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
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
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.
adorable avatar site ain't giving accessing...can anyone help???
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!