Beautiful, once we've got something on screen, I would want to work with my infinite scroll, essentially
as we keep on scrolling, the moment we get to the bottom of the page, we will fetch more images and
we'll do that in multiple steps because there's going to be some glitches along the way.
And eventually it will look something like this one.
As we keep on scrolling, we have this loading and we just keep on watching the images and loading and
fetching the images.
You get the gist.
And I can tell you right away that, yes, there are definitely some libraries that help you do that.
But I thought it would be more interesting if we would do it ourselves, since we just need to go back
to just one dress and we can do that with a few lines of code.
So first of all, I would want to set up some kind of event listener when my app loads and when I say
some kind of event listener, I would want to listen for scroll events.
And the way we do that, of course, we set up the use of it.
So at the moment we have one user that is running puch pages right away when the app loads.
But I also want to set up another one and this is going to be listening for that scroll event.
So we go at year's effect and then we have our connection.
Now, of course, I have dependency, which is going to be just empty.
All right.
And in order to set it up, I'm going to have to go back to the Joska plan.
And since we know that it is a better practice to also remove the event listener when we exit, we'll
also do that one as well.
So, all right.
A set it up, a different variable and this one will be equal to the window, then the event listener.
And then, of course, we'll be listening for Skrull event and then there's going to be some kind of
callback function.
And before we set up any kind of logic in that callback function, I also would want to go with my return
on line when we exit.
I would want to go with window and then remove a listener.
Now, of course, we are holding this value in the variable.
Now, I would want to remove the scroll event, of course, and then I'll pass in the event.
So now we are responsible citizens.
Awesome.
And then what is happening here in the callback function?
Well, I would want to check for three values I would want to check for in our height of the window.
I would want to check how much we have scrolled and then what is the height of the document.
So in here, we'll just start by logging three values.
So we go with log on and we're going to go with in our height.
And maybe I'm just going to add some values over here.
I'm going to say in our in our height, which essentially just returns the height of the window and
in order to access that value will go for window object.
Like I said, we're going back to when I want your script.
That's the first value.
I'll copy and paste and then I'll just change these values around where I'm going to say scroller.
So how much we have scrolled, I think I can just have it as one word.
Madore, this should be scroll like this and then in order to access that on a window, the property
name is the same.
So we go with scroll Y and let me be consistent so we'll have the same property down here.
And the last one is going to be, well, how big is our body?
And then in order to access that, so say body height, something like this, I'm going to go with document
that body and then scroll.
Right.
So essentially that just tells me, well, how big is my document?
And of course, there's going to be some calculations where we will check what is the height and scroll,
why and if it is bigger than the document.
Because the whole idea is, as I'm scrolling, I want to check.
I'm right at the end of the document.
So this is not going to be window.
We go to document and body and then, of course, we're looking for the property name of scroll and
then.
Right.
So I'll cancel all of them and now go to the bigger browser.
I'll inspect and Will should right away have the event listener, and we do and now notice how we're
getting these values.
So as I keep on scrolling, I'm getting back some kind of value share.
And I have the body height, which is 15 and then 13.
So one thousand five hundred thirteen pixels.
Then I have the inner height of my window, which should change as the controls changing.
So notice if I make this smaller and I scroll, but then I should get different powers.
So I scroll and notice how right now the inner height is a bit bigger because of course I made my console
bigger.
Correct.
Or I'm sorry I made the console smaller.
That's why initially the inner height was different.
So the inner height was four hundred and sixty five right here.
But then when I made my console smaller, that's why it of course got bigger the inside.
So I'm talking about this in our height off my window.
OK then I have the value of how much I have scrolled notice here.
It tells me fifty four pixels.
So once I scroll eventually notice I have scroll way.
So this is how much I have scrolled and then I have the inner height of the window and now I would want
to add both of these wires together.
So inner height plus the scroll and I want to check if it is equal to the body height.
And of course, the reason why I want a body height is because we want to make sure that we set up our
functionality once we are at the end of the document, because remember, our main goal, once we get
to the bottom of the document, only then I would want to fetch those images.
That's why I'm checking.
Well, what is the height?
And then once I get it, then of course I will be able to fetch images.
And as a side note, while I was just showing you how the app works, I already run out of my requests.
And that is, of course, four different account.
That is the account that I set up in order to build the project.
Now, the reason why I'm showing that, that if in a console you see this four or three, that just
means that you run out of the requests because remember, you have 50 requests in an hour.
And if you get this four or three, that just means that you have no more requests.
So if you get this error, just understand that you'll have to wait a little bit.
Otherwise you won't be able to get the images.
Now I'm able to get the old images and that's why they're appearing.
But as far as the new ones, well, I'm going to have to wait for next hour.
Now, of course, we'll still keep on working on a project.
I don't have to wait for these requests for this project, but I'm just showing you the error you're
going to get if you run out of the requests.
So now, of course, we can navigate back to our project.
And then, like I said, I would want to combine both of these values in our height and scroll long.
And then if it is bigger or equal than the scroll height of the document, then I would want to do something
and eventually that something is going to be fetching more images.
But this video is just going to be a simple console.
So what we're going to do is remove all of these control locks.
Hopefully everything is clear and we'll set up if and also if a window and in our height was the property,
plus how much we have scrolled.
So we have a window and then scroll y.
Correct.
So scroll and then y if they are bigger or equal then of course we would want to do something.
Now since I'm going to have to add both of these factors and I would still want to check not to add
them in parentheses and also if these values combined are bigger or equal to a document.
Then body and mind, we have a scroll height, then, of course, I want to do something, so I'm going
to go, it comes along and I'm going to say it worked over here.
So if the entire height plus the scroll, why is bigger or equal to the body height, then of course
I'm at the end of the document.
So save over here and we're going to go to the stock images like so and then notice how.
Yeah, technically it worked.
But I'm actually going to add minus two pixels because I would want to write a little bit before we
get to the end of the document.
And the way I can do that is by just adding minus two pixels.
Now, of course, in your case, if you want to fetch those images earlier, of course, the more you
subtract from the document, the sooner you fetch images.
So, for example, if I go with, I don't know, 100 pixels, what that means is I start scrolling and
then, of course, this is going to happen sooner.
All right.
We have this.
It worked.
Not on my case.
I will keep this to be true.
And I would want to add one more value in my if statement where I'm setting up deconditioned.
And essentially, since I know that eventually I'll be changing the pages, but that will lead to a
fetching.
I'll also include here the loading, because basically of the setup that I'm trying to avoid is if we
are going to be in the bottom of the document.
I don't want to keep on fighting for fetching.
So while I'm loading, even though I might be in the bottom of the document, I would want to only fetch
newer images if we are not loading because remember.
When we invoke these images, of course, in the beginning, we're learning, so that's why in here
in their statement, I'll also say, yeah, grab those images when I'm at the bottom of the document.
However, don't do it if I'm nodding, because that already means that I'm going to be fetching images.
I if loading is false and we're going to add that using and operator.
So now I save.
And of course in this case it's not going to change since we're not fetching the images.
But then once we get to the bottom, of course now we have it worked.
Beautiful.
Now we can slowly start setting up the logic where we get new images once we get to the bottom of the
document.