1
00:00:00,470 --> 00:00:08,900
Beautiful, once we've got something on screen, I would want to work with my infinite scroll, essentially

2
00:00:09,110 --> 00:00:17,450
as we keep on scrolling, the moment we get to the bottom of the page, we will fetch more images and

3
00:00:17,450 --> 00:00:22,940
we'll do that in multiple steps because there's going to be some glitches along the way.

4
00:00:23,300 --> 00:00:26,530
And eventually it will look something like this one.

5
00:00:27,290 --> 00:00:33,240
As we keep on scrolling, we have this loading and we just keep on watching the images and loading and

6
00:00:33,240 --> 00:00:34,160
fetching the images.

7
00:00:35,030 --> 00:00:35,870
You get the gist.

8
00:00:36,260 --> 00:00:40,820
And I can tell you right away that, yes, there are definitely some libraries that help you do that.

9
00:00:41,090 --> 00:00:47,210
But I thought it would be more interesting if we would do it ourselves, since we just need to go back

10
00:00:47,210 --> 00:00:53,220
to just one dress and we can do that with a few lines of code.

11
00:00:53,570 --> 00:01:00,470
So first of all, I would want to set up some kind of event listener when my app loads and when I say

12
00:01:00,470 --> 00:01:05,330
some kind of event listener, I would want to listen for scroll events.

13
00:01:05,630 --> 00:01:09,510
And the way we do that, of course, we set up the use of it.

14
00:01:09,830 --> 00:01:16,850
So at the moment we have one user that is running puch pages right away when the app loads.

15
00:01:17,090 --> 00:01:23,000
But I also want to set up another one and this is going to be listening for that scroll event.

16
00:01:23,330 --> 00:01:27,110
So we go at year's effect and then we have our connection.

17
00:01:27,380 --> 00:01:32,230
Now, of course, I have dependency, which is going to be just empty.

18
00:01:32,240 --> 00:01:32,550
All right.

19
00:01:32,990 --> 00:01:37,160
And in order to set it up, I'm going to have to go back to the Joska plan.

20
00:01:37,460 --> 00:01:44,690
And since we know that it is a better practice to also remove the event listener when we exit, we'll

21
00:01:44,690 --> 00:01:46,500
also do that one as well.

22
00:01:46,880 --> 00:01:47,780
So, all right.

23
00:01:47,780 --> 00:01:54,200
A set it up, a different variable and this one will be equal to the window, then the event listener.

24
00:01:54,410 --> 00:02:00,290
And then, of course, we'll be listening for Skrull event and then there's going to be some kind of

25
00:02:00,290 --> 00:02:01,250
callback function.

26
00:02:01,490 --> 00:02:08,480
And before we set up any kind of logic in that callback function, I also would want to go with my return

27
00:02:08,840 --> 00:02:10,880
on line when we exit.

28
00:02:11,150 --> 00:02:15,000
I would want to go with window and then remove a listener.

29
00:02:15,270 --> 00:02:18,500
Now, of course, we are holding this value in the variable.

30
00:02:18,830 --> 00:02:24,200
Now, I would want to remove the scroll event, of course, and then I'll pass in the event.

31
00:02:24,530 --> 00:02:27,320
So now we are responsible citizens.

32
00:02:27,330 --> 00:02:27,770
Awesome.

33
00:02:28,770 --> 00:02:32,080
And then what is happening here in the callback function?

34
00:02:32,460 --> 00:02:39,120
Well, I would want to check for three values I would want to check for in our height of the window.

35
00:02:39,550 --> 00:02:46,220
I would want to check how much we have scrolled and then what is the height of the document.

36
00:02:46,620 --> 00:02:50,630
So in here, we'll just start by logging three values.

37
00:02:50,910 --> 00:02:54,660
So we go with log on and we're going to go with in our height.

38
00:02:55,110 --> 00:02:57,690
And maybe I'm just going to add some values over here.

39
00:02:57,970 --> 00:03:05,950
I'm going to say in our in our height, which essentially just returns the height of the window and

40
00:03:06,510 --> 00:03:09,000
in order to access that value will go for window object.

41
00:03:09,240 --> 00:03:12,780
Like I said, we're going back to when I want your script.

42
00:03:13,030 --> 00:03:14,040
That's the first value.

43
00:03:14,310 --> 00:03:21,860
I'll copy and paste and then I'll just change these values around where I'm going to say scroller.

44
00:03:22,200 --> 00:03:27,270
So how much we have scrolled, I think I can just have it as one word.

45
00:03:27,660 --> 00:03:34,080
Madore, this should be scroll like this and then in order to access that on a window, the property

46
00:03:34,080 --> 00:03:35,840
name is the same.

47
00:03:35,850 --> 00:03:42,060
So we go with scroll Y and let me be consistent so we'll have the same property down here.

48
00:03:42,330 --> 00:03:47,730
And the last one is going to be, well, how big is our body?

49
00:03:48,510 --> 00:03:55,890
And then in order to access that, so say body height, something like this, I'm going to go with document

50
00:03:55,890 --> 00:03:58,080
that body and then scroll.

51
00:03:58,080 --> 00:03:58,240
Right.

52
00:03:58,620 --> 00:04:01,910
So essentially that just tells me, well, how big is my document?

53
00:04:02,310 --> 00:04:07,890
And of course, there's going to be some calculations where we will check what is the height and scroll,

54
00:04:07,900 --> 00:04:11,220
why and if it is bigger than the document.

55
00:04:11,430 --> 00:04:14,640
Because the whole idea is, as I'm scrolling, I want to check.

56
00:04:14,880 --> 00:04:17,140
I'm right at the end of the document.

57
00:04:17,370 --> 00:04:18,720
So this is not going to be window.

58
00:04:18,870 --> 00:04:27,990
We go to document and body and then, of course, we're looking for the property name of scroll and

59
00:04:27,990 --> 00:04:28,380
then.

60
00:04:28,410 --> 00:04:28,680
Right.

61
00:04:29,160 --> 00:04:33,870
So I'll cancel all of them and now go to the bigger browser.

62
00:04:35,050 --> 00:04:42,850
I'll inspect and Will should right away have the event listener, and we do and now notice how we're

63
00:04:42,850 --> 00:04:43,720
getting these values.

64
00:04:43,990 --> 00:04:50,170
So as I keep on scrolling, I'm getting back some kind of value share.

65
00:04:50,560 --> 00:04:55,980
And I have the body height, which is 15 and then 13.

66
00:04:56,080 --> 00:04:58,750
So one thousand five hundred thirteen pixels.

67
00:04:59,170 --> 00:05:05,850
Then I have the inner height of my window, which should change as the controls changing.

68
00:05:06,110 --> 00:05:11,880
So notice if I make this smaller and I scroll, but then I should get different powers.

69
00:05:11,890 --> 00:05:18,340
So I scroll and notice how right now the inner height is a bit bigger because of course I made my console

70
00:05:18,340 --> 00:05:18,700
bigger.

71
00:05:18,880 --> 00:05:19,330
Correct.

72
00:05:19,330 --> 00:05:21,640
Or I'm sorry I made the console smaller.

73
00:05:21,860 --> 00:05:24,900
That's why initially the inner height was different.

74
00:05:25,240 --> 00:05:30,220
So the inner height was four hundred and sixty five right here.

75
00:05:30,460 --> 00:05:36,450
But then when I made my console smaller, that's why it of course got bigger the inside.

76
00:05:36,670 --> 00:05:40,560
So I'm talking about this in our height off my window.

77
00:05:40,900 --> 00:05:45,930
OK then I have the value of how much I have scrolled notice here.

78
00:05:45,940 --> 00:05:48,810
It tells me fifty four pixels.

79
00:05:49,060 --> 00:05:54,040
So once I scroll eventually notice I have scroll way.

80
00:05:54,370 --> 00:06:01,090
So this is how much I have scrolled and then I have the inner height of the window and now I would want

81
00:06:01,090 --> 00:06:03,190
to add both of these wires together.

82
00:06:03,430 --> 00:06:10,630
So inner height plus the scroll and I want to check if it is equal to the body height.

83
00:06:10,810 --> 00:06:17,710
And of course, the reason why I want a body height is because we want to make sure that we set up our

84
00:06:17,710 --> 00:06:25,660
functionality once we are at the end of the document, because remember, our main goal, once we get

85
00:06:25,660 --> 00:06:30,250
to the bottom of the document, only then I would want to fetch those images.

86
00:06:30,580 --> 00:06:31,720
That's why I'm checking.

87
00:06:32,140 --> 00:06:33,430
Well, what is the height?

88
00:06:33,640 --> 00:06:38,290
And then once I get it, then of course I will be able to fetch images.

89
00:06:38,650 --> 00:06:47,650
And as a side note, while I was just showing you how the app works, I already run out of my requests.

90
00:06:47,860 --> 00:06:49,840
And that is, of course, four different account.

91
00:06:49,840 --> 00:06:54,500
That is the account that I set up in order to build the project.

92
00:06:54,700 --> 00:07:00,520
Now, the reason why I'm showing that, that if in a console you see this four or three, that just

93
00:07:00,520 --> 00:07:05,530
means that you run out of the requests because remember, you have 50 requests in an hour.

94
00:07:05,770 --> 00:07:10,360
And if you get this four or three, that just means that you have no more requests.

95
00:07:10,630 --> 00:07:14,470
So if you get this error, just understand that you'll have to wait a little bit.

96
00:07:14,710 --> 00:07:17,620
Otherwise you won't be able to get the images.

97
00:07:17,860 --> 00:07:20,770
Now I'm able to get the old images and that's why they're appearing.

98
00:07:20,770 --> 00:07:25,020
But as far as the new ones, well, I'm going to have to wait for next hour.

99
00:07:25,030 --> 00:07:28,210
Now, of course, we'll still keep on working on a project.

100
00:07:28,390 --> 00:07:33,850
I don't have to wait for these requests for this project, but I'm just showing you the error you're

101
00:07:33,850 --> 00:07:36,790
going to get if you run out of the requests.

102
00:07:37,180 --> 00:07:40,360
So now, of course, we can navigate back to our project.

103
00:07:40,360 --> 00:07:46,480
And then, like I said, I would want to combine both of these values in our height and scroll long.

104
00:07:46,930 --> 00:07:54,700
And then if it is bigger or equal than the scroll height of the document, then I would want to do something

105
00:07:55,060 --> 00:07:59,500
and eventually that something is going to be fetching more images.

106
00:07:59,710 --> 00:08:03,400
But this video is just going to be a simple console.

107
00:08:04,000 --> 00:08:07,620
So what we're going to do is remove all of these control locks.

108
00:08:07,630 --> 00:08:15,550
Hopefully everything is clear and we'll set up if and also if a window and in our height was the property,

109
00:08:15,760 --> 00:08:18,010
plus how much we have scrolled.

110
00:08:18,160 --> 00:08:21,730
So we have a window and then scroll y.

111
00:08:21,730 --> 00:08:22,180
Correct.

112
00:08:22,270 --> 00:08:29,710
So scroll and then y if they are bigger or equal then of course we would want to do something.

113
00:08:30,010 --> 00:08:35,980
Now since I'm going to have to add both of these factors and I would still want to check not to add

114
00:08:35,980 --> 00:08:43,600
them in parentheses and also if these values combined are bigger or equal to a document.

115
00:08:44,570 --> 00:08:52,940
Then body and mind, we have a scroll height, then, of course, I want to do something, so I'm going

116
00:08:52,940 --> 00:08:57,150
to go, it comes along and I'm going to say it worked over here.

117
00:08:57,500 --> 00:09:05,420
So if the entire height plus the scroll, why is bigger or equal to the body height, then of course

118
00:09:05,630 --> 00:09:07,810
I'm at the end of the document.

119
00:09:08,120 --> 00:09:15,340
So save over here and we're going to go to the stock images like so and then notice how.

120
00:09:15,350 --> 00:09:16,640
Yeah, technically it worked.

121
00:09:17,120 --> 00:09:24,830
But I'm actually going to add minus two pixels because I would want to write a little bit before we

122
00:09:24,830 --> 00:09:26,900
get to the end of the document.

123
00:09:27,260 --> 00:09:33,050
And the way I can do that is by just adding minus two pixels.

124
00:09:33,290 --> 00:09:40,520
Now, of course, in your case, if you want to fetch those images earlier, of course, the more you

125
00:09:40,520 --> 00:09:45,320
subtract from the document, the sooner you fetch images.

126
00:09:45,590 --> 00:09:52,820
So, for example, if I go with, I don't know, 100 pixels, what that means is I start scrolling and

127
00:09:52,820 --> 00:09:54,710
then, of course, this is going to happen sooner.

128
00:09:54,930 --> 00:09:55,370
All right.

129
00:09:55,420 --> 00:09:56,060
We have this.

130
00:09:56,210 --> 00:09:56,780
It worked.

131
00:09:56,780 --> 00:09:57,260
It worked.

132
00:09:57,260 --> 00:09:57,730
It worked.

133
00:09:57,950 --> 00:09:58,580
Not on my case.

134
00:09:58,610 --> 00:10:01,580
I will keep this to be true.

135
00:10:01,970 --> 00:10:08,030
And I would want to add one more value in my if statement where I'm setting up deconditioned.

136
00:10:08,600 --> 00:10:15,530
And essentially, since I know that eventually I'll be changing the pages, but that will lead to a

137
00:10:15,530 --> 00:10:15,970
fetching.

138
00:10:16,190 --> 00:10:23,990
I'll also include here the loading, because basically of the setup that I'm trying to avoid is if we

139
00:10:23,990 --> 00:10:27,380
are going to be in the bottom of the document.

140
00:10:27,620 --> 00:10:29,920
I don't want to keep on fighting for fetching.

141
00:10:30,200 --> 00:10:38,860
So while I'm loading, even though I might be in the bottom of the document, I would want to only fetch

142
00:10:38,870 --> 00:10:43,670
newer images if we are not loading because remember.

143
00:10:44,750 --> 00:10:50,030
When we invoke these images, of course, in the beginning, we're learning, so that's why in here

144
00:10:50,300 --> 00:10:56,890
in their statement, I'll also say, yeah, grab those images when I'm at the bottom of the document.

145
00:10:56,900 --> 00:11:03,200
However, don't do it if I'm nodding, because that already means that I'm going to be fetching images.

146
00:11:03,770 --> 00:11:09,490
I if loading is false and we're going to add that using and operator.

147
00:11:09,830 --> 00:11:11,330
So now I save.

148
00:11:11,540 --> 00:11:15,260
And of course in this case it's not going to change since we're not fetching the images.

149
00:11:15,500 --> 00:11:19,330
But then once we get to the bottom, of course now we have it worked.

150
00:11:19,550 --> 00:11:20,090
Beautiful.

151
00:11:20,400 --> 00:11:27,170
Now we can slowly start setting up the logic where we get new images once we get to the bottom of the

152
00:11:27,170 --> 00:11:27,590
document.