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.
This is amazing thanks!, but one thing I really concerned about is the optimization, what happen if image request is too many, how can you handle thousands of request (For instance) by not overflowing your document?
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
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! 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.
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?
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!
Found a clear and super easy implementation of Infinite Scroll after 2 days. Thanks man!
Great to hear!
Your a champion of teaching. I really appreciate your work!
I appreciate that!
Simple and elegant explanation!
Thanks. ❤
Glad you liked it!
The best explanation i ever got!! BEST VIDEO
Glad it helped!
Dont stop making tutorials, very nicely explained. Thank you
Thanks Sudharshan, more to come!
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!
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!
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 👍🏻
Wow, friend suggested an api for this, but this seems so much more simple!
This is awesome, perfect explantion. Saw before this video something on MDN was much more complicated.
Glad it helped!
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!
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/google-secrets-cheat-sheet
thank you!!! finally learned how Infinite Scroll works!!! thank you!
Great! Thanks for watching!
Amazing tutorial! Very Simple Easy And Informative! Keep up the good work!
Thanks, will do!
What a clean explanation, just subscribed right away! I wish you success. I'll check your other videos too. 😊🖤
Great, thanks for watching!
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: 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 👍🏻👍🏻👍🏻
This is amazing thanks!, but one thing I really concerned about is the optimization, what happen if image request is too many, how can you handle thousands of request (For instance) by not overflowing your document?
Simple and thorough. Thank you!
Great, thanks Rajat!
Perfect! Keep going sir.
Thanks, more coming soon!
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.
Join "The Code Creative Community" group on Facebook: facebook.com/groups/thecodecreative
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.
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
crystal clear, thank you sir.
Glad to hear that!
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.
To subscribe to the channel: ruclips.net/channel/UCmOpHGj4JRWCdXhllVTZCVw
Great explanation
Glad to hear, thanks for watching!
Great Work !! Just curious to know which font you are using?
Thanks Prashant! It's called Fira Code.
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 👍🏻
Gem to the development society
Thank you!
Hello the creative code,
Very cool tutorial.
May you please make an other tuto using MySQL and PHP ?
I will try!
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
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!
adorable avatar site ain't giving accessing...can anyone help???
thank you
Thanks for watching!
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.