HomeОбразованиеRelated VideosMore From: Adam Khoury

Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax

823 ratings | 109017 views
Lesson Code: http://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax Learn to make dynamic page content appear only when user scrolls down to the bottom of your page content using Javascript. We are using the onscroll event for the window object and several DOM properties to create the functionality. *object.offsetHeight - *window.pageYOffset - *window.innerHeight. It serves as a smart way for dynamic websites to load only the data required to fill the window, then load more as the user scrolls down the page. You can see this effect if you have a Facebook account and you scroll down your timeline. Facebook executes new Ajax requests each time you scroll to the bottom of the page content, to load in more data to the page magically with Ajax. This way they do not have to load a lot of data to the page initially, and only spend dynamic data loading energy if the user scrolls down the page to see more and more data. Other large scale dynamic websites also use this approach to achieve efficient database data rendering in a smart modern way.
Html code for embedding videos on your blog
Text Comments (100)
Sandeep Nath (3 months ago)
What IDE is this?
Wild Mitchell (4 months ago)
Can't believe I listened to this retard for 15 minutes, what a fucking freak... and it doesn't work
tarık demirbilek (7 months ago)
I liked + subscribed!! I found what I'm looking for!! :))
Melvin (10 months ago)
Wtf was that burp?
Gabriel G (10 months ago)
This was super helpful! Thank you! You explained everything really well and LOLLL @ "you know what i mean mayne"
Sami R. (1 year ago)
Very helpful. Thank you! :)
So JavaScript's window.innerHeight is like CSS' viewHeight?
easternhair (1 year ago)
could u make a tutorial on loading large JSON data in portions, please, load dynamically when page is scrolling down, thanks lot, great tutorials
Altaf Hussain (1 year ago)
nice tutorials! thanks! i am confused regarding that div keep on repeating infinitely. can you explain how its happening?
Muddassir Ahmad (1 year ago)
thank you so much. It really helped me.
fatalBaz00k (1 year ago)
dosn't work... :(
thanks bro
Dafle Cardoso (2 years ago)
simple and fantastic
skwebtuts (2 years ago)
very nice tutorial, Exactly the same I was looking for!
x zhou (2 years ago)
what if the content isnt blue box? I actually have more data to show, but when the page just loaded i only want to show the first 10 items, as you scroll down you can see all 50 items.
Sampah Emmanuel (2 years ago)
assuming I am suppose to be loading events or post, how do i get to update the various comments for each of the events in A REAL-TIME situation
Kanwal Gill (2 years ago)
10:20 .lol
Tamer Durgun (2 years ago)
İt would be great that some ajax rq done and append data as 4 items per request in this tutto :(
Joint Zhou (2 years ago)
Thanks dude, the tutorial was great but how to load different content each time like lazyload images when users hit the bottom? the ajax cannot be the same all the time, is there anything need to be down on the server side?
Siya Ntombela (2 years ago)
Brilliant explanation!
Caleb Prenger (2 years ago)
I want to like this videos but i don't like the guy lol
Adam Khoury (1 year ago)
lol
eBatatas (2 years ago)
Thank you
Vidyut Gupta (2 years ago)
very useful tutorial.. thanks
ThePREngineer (3 years ago)
Dude, your voices in the tutorials are epic! They help me to not doze off.
Green is Beautiful (3 years ago)
Thanks for this Let me subscribe.
Vivek P (3 years ago)
Thanks for this! Using it with jQuery, used scrollHeight instead of offsetHeight to get the right behaviour.
HIMEL SARKAR (3 years ago)
Thanks
Arman J.C. (3 years ago)
Can you make a tutorial on how to burp??
Dragonbreak (1 year ago)
gosh that was awful
Falah Aboud (3 years ago)
can you tell me how to make (Tricky Button Moving Away when Mouseover) thanks
Vasil Pujovski (3 years ago)
If someone knows, pleas explain the "ajax call to get more dynamic data goes here" part. I am struggling with it for more than a week... Or, even better, if someone can put a finished source of this tutorial video. Thanks :)
F.A.R Productions (3 years ago)
can you please tell me how to make this script stop loading once my data is all loaded? it kept loading empty space i don't know how to stop it :(
This is not noobish jQuery... but okay
Peter Moua (3 years ago)
if (data !== ' ') { scrollwrap.innerHTML += '<div class="newData">' + data + '</div>'; }
Nadeem Nakade (3 years ago)
+F.A.R Productions jquery.stop()
Aladeen (3 years ago)
+F.A.R Productions watch his tutorial in JSON part 7. so you have an idea.
Purdy Mouth (3 years ago)
+F.A.R Productions there's a lot of technique. First, you could just mark the response sent from the script. Next time it loads, pass the "mark" as parameter. Then the script would know that you got all you need, and thus, able to send nothing. Or, you could make the script to send response with a "marker" that says "this is the end". Then, when it's time to load stuffs, the javascript code could check if we have reached the end of the data, and thus, kill itself and do nothing.
Tri Setya Darmawan (3 years ago)
thanks :)
Peter M. Souza Jr. (3 years ago)
im still so lost on this one.
Rattl3ogic (3 years ago)
Just what i needed for my project thx
Robert Dannelly (3 years ago)
Adam, awesome tutorial.   Very well done.  Although I am a ASP.NET developer this will work for me.   Great friendly, kind and (I want to help my fellow developer) tone.  You did a great job.  Thumbs up.
Okem Okorie (3 years ago)
Lol am I the only one that got caught off guard with that burp. I died laughing
R. Lee (6 months ago)
I like real people
Kevin (3 years ago)
Can you please give us the load more HTML page data onto the bottom code?  I've been stuck for a few days on that part.
Kevin (2 years ago)
yes, after a lot of work.
Iraq gemstone (3 years ago)
Thanks for adam and others I need function to stop run timeline if ended data from database
Will To Win (3 years ago)
MAHETHEKILLER (3 years ago)
thanx adam
Best QSystems (3 years ago)
Hahahaha this guy makes someone to laugh.... the way you have introduced the video makes happy .... thanks adam for your tutorials they are great
gntvict (4 years ago)
Just recently stumbled on your stuff... cant stop learning from it all... good stuff... have learned alot... more to go.  was curious which code editor u use.  I like the programed buttons on the left...
arun prasad (4 years ago)
very good  thanks bro
Tony Therm (4 years ago)
If i copy-paste this code i would see the blue background content? It doesnt work to my pc. Is there something i miss? I dont use ajax call but i think i should see the new div when i scroll, like this tutorial. Can anyone help me?
Gardson Binasbas (4 years ago)
thanks!
Waleed A.Malek (4 years ago)
Learned a lot... a lot... a lot from you Adam. I loved Javascript because of you.
alvin prado (4 years ago)
GREAT TUTORIAL AGAIN. THANKS MAN  
Gilbert Bigelow (4 years ago)
Adam, thanks for the lesson and the pointer to find this video here.
Bryan Luce (4 years ago)
"in a smart modern way... **BELCH!!!**" great way to get my attention :)
Luizltg (4 years ago)
I subscribed when i heard him barf.
ZenLiminal (7 months ago)
I started watching the video after I read your comment. :)
F-22 Raptor (4 years ago)
Best Tutorial I have ever seen for lazy Load 
Jav X (4 years ago)
Not Work in Internet Explorer 7, 8! There is something you can do??? Help me please! Regars! Saltillo México.
dragonore2009 (4 years ago)
This works well with the pop up for featured content you see sometimes on websites when you scroll down a bit, just small modifications are needed.  Thanks Adam.
Damian Toczek (5 years ago)
Which program are u using to write all scripts and that staff ? cos i have only notepad++ :x
dewitall (5 years ago)
Notepad++ is really pretty good, I've been using NetBeans for web development, for a good while, and I gotta say, I like it a lot better than Notepad++; NetBeans web development has great autocomplete features. I'm going to check out Visual Studio next, my friend showed me the newest version, and I was impressed! So if you're in college, you could get Visual Studio for free, and NetBeans is free.
Korupshen (5 years ago)
You da man Adam. YOU DA MAN!!!
someonenoone (5 years ago)
i think this will slow down the webpage as every time user scroll down on webpage the whole page gets loaded with extra content. tell us a way to not effect the already loaded content and only load new content
Saad Altwaim (5 years ago)
hi every one where can i find the Ajax call to get more dynamic data CODE
mecos9 (5 years ago)
"In a smart, modern way... ERRRRRRRP." LOL!
mike v (5 years ago)
The info at 0:41 helped me a lot
Quinta Soledad (5 years ago)
same problem here
Gilbert Bigelow (5 years ago)
Notice the SEO placed in the comment above? SEO is rated by the appropriate use of keywords and page location.To boost rating of a video, visitors need to leave comments that use nouns similar to that used in the title and not pronouns. See,below,all the comments are typical, a lot of thanks and questions but no reuse of page keywords. We get visitor to like and comment; why do we not get them to make a reference to the video by title or write about their thoughts using some of the keywords?
Samuel Hughes Mensah (5 years ago)
HELP: how would you load multiple request. example 1. div 1 load get the the bottom of the div 1 and loads div 2 2. gets to the bottom of div 2 and loads div 3
Samuel Hughes Mensah (5 years ago)
how can you load multiple content from different callbacks on scroll
Patrick McGuire (5 years ago)
This s the bomb for slow computers
Hanamichi Sakuragi (6 years ago)
What if I want this to happen in a div? Is it possible?
Alexander Tzoy (6 years ago)
Great Tutorial! reminds me of 9gag :)
R Jim (6 years ago)
hahaha burrrppppp !!
TheDudeNextDoor (6 years ago)
Dude, you're awesome and all but don't burp into the mic LOL XD
gapbrick (6 years ago)
Currently working on a social network with blogging function and that helped me a lot! Thank you Adam!
js cannot retrieve content height 7:00
Berrilike (6 years ago)
Hey...thanks so much for the great video! Question: How do you stop it after there is no more content to load???
Boduk Balonzo (6 years ago)
lol what is that???
Ioan190 (6 years ago)
lol 2:53
Afam Nweke (6 years ago)
If I wanted to apply this to only a scrollable div, would I just have to change the window object to the div object?
immad ibrar (6 years ago)
HOW MUCH WOULD YOU CHARGE TO MAKE A SOCIAL NETWORK WEBSITE?
Rasmus Andersson (6 years ago)
But how to add more content when you scrolled down to the bottom? Now it is the same content over and over again. PLZ help me!!!!
KK Lets (6 years ago)
Bravo Adam, your tutorials are always the best. Could you pls do a tutorial for PHP report printing. Lets say one want to print database report.
Rakesh Kumar (6 years ago)
Adam thank you for this video.
Eric Smith (6 years ago)
Thanks Adam, As usual this is another great useful vid and I really appreciate your time and effort in doing this for us. Eric
Carlos Saavedra (6 years ago)
So, that's how you do it. I have an idea for your next tutorial, SEO links, how do you make: domain.com?hello=1&world=stuff into: domain.com/1/stuff/ I've been editing my .htaccess file in my apache server, but nothing happens :(, been trying to get it to work since like ever, but still no results
Len Farneth (6 years ago)
This is exactly what I needed. Not real sure how to set up the queries to display just the records I need and not pull everything all at once, but I guess if I play with it a while it will all make sense. Thanks.
tommycool1234 (6 years ago)
awesome!
ALI MUNTH (6 years ago)
U R FIRST
FlapnaadPro (6 years ago)
next 500th video special? 30 minute video?
Viktor Wahlberg (6 years ago)
Really great tutorial. Never really like tutorials overall, but this one I found very interesting and I learned the window.pageYOffset. That what new to me. Thanks!
منوعات عامة (6 years ago)
awesome good jon
Dániel Emőd Kovács (6 years ago)
0:41 lol

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.