Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,310 --> 00:00:03,280 One of the most important things 2 2 00:00:03,280 --> 00:00:07,000 when building any website is performance. 3 3 00:00:07,000 --> 00:00:11,940 And images have by far the biggest impact on page loading. 4 4 00:00:11,940 --> 00:00:13,630 And so it's very important 5 5 00:00:13,630 --> 00:00:17,310 that images are optimized on any page. 6 6 00:00:17,310 --> 00:00:18,190 And for that, 7 7 00:00:18,190 --> 00:00:22,260 we can use a strategy called Lazy Loading Images. 8 8 00:00:22,260 --> 00:00:23,690 So, let me show you now 9 9 00:00:23,690 --> 00:00:27,063 how to implement that strategy in JavaScript. 10 10 00:00:28,790 --> 00:00:32,480 And the effect that I'm talking about is this one. 11 11 00:00:32,480 --> 00:00:34,930 So what for what happens with the images 12 12 00:00:34,930 --> 00:00:36,163 in this section here? 13 13 00:00:37,200 --> 00:00:38,883 So you see, as we approach it, 14 14 00:00:39,750 --> 00:00:43,560 it basically starts to load and then once it finished, 15 15 00:00:43,560 --> 00:00:46,340 it will get displayed and that placeholder 16 16 00:00:46,340 --> 00:00:49,113 which is there in the beginning gets replaced. 17 17 00:00:50,030 --> 00:00:51,073 So you see that? 18 18 00:00:52,230 --> 00:00:55,830 So let me quickly show you in the HTML how we implement that 19 19 00:00:57,150 --> 00:00:59,660 and we're actually already here. 20 20 00:00:59,660 --> 00:01:02,380 So, it's these features here 21 21 00:01:02,380 --> 00:01:05,920 and so each of these features has an image. 22 22 00:01:05,920 --> 00:01:09,740 So, the main ingredient to this lazy loading strategy 23 23 00:01:09,740 --> 00:01:12,650 is that we have a very low resolution image, 24 24 00:01:12,650 --> 00:01:15,170 which is really small and which is loaded, 25 25 00:01:15,170 --> 00:01:16,930 right in the beginning. 26 26 00:01:16,930 --> 00:01:19,380 So that's this image here, and you'll see 27 27 00:01:19,380 --> 00:01:24,380 that the dimensions are only 200 times 120 in this case. 28 28 00:01:24,700 --> 00:01:27,983 So let's actually take a look at that image here. 29 29 00:01:28,950 --> 00:01:31,230 And so, you see it's really small 30 30 00:01:31,230 --> 00:01:35,090 and it's only 16 kilobytes while the real one, 31 31 00:01:35,090 --> 00:01:39,380 so this one called digital, is almost half a megabyte. 32 32 00:01:39,380 --> 00:01:42,370 So that's a huge difference 33 33 00:01:42,370 --> 00:01:45,350 and that image we then reference here 34 34 00:01:45,350 --> 00:01:48,370 in this data-src attribute. 35 35 00:01:48,370 --> 00:01:50,800 So that's a special attribute that we can use, 36 36 00:01:50,800 --> 00:01:53,460 but any other would work as well. 37 37 00:01:53,460 --> 00:01:56,230 So this is not a standard HTML attribute 38 38 00:01:56,230 --> 00:01:59,720 but instead it's one of these special data attributes 39 39 00:01:59,720 --> 00:02:01,123 that we can do ourselves. 40 40 00:02:02,330 --> 00:02:05,030 And so basically the idea is to... 41 41 00:02:05,030 --> 00:02:08,850 As we scroll to one of these low resolution images 42 42 00:02:08,850 --> 00:02:12,280 we will then replace this low resolution image 43 43 00:02:12,280 --> 00:02:14,681 with the one that is here specified 44 44 00:02:14,681 --> 00:02:17,140 in the data-src attribute. 45 45 00:02:17,140 --> 00:02:21,090 And we then also are gonna remove this class here 46 46 00:02:21,090 --> 00:02:22,920 which has kind of this filter, 47 47 00:02:22,920 --> 00:02:27,320 which makes this image blurred because without this filter, 48 48 00:02:27,320 --> 00:02:28,633 let me show that to you, 49 49 00:02:29,490 --> 00:02:32,503 without this, it would look really terrible. 50 50 00:02:33,580 --> 00:02:38,193 So too small to change this now here. 51 51 00:02:39,810 --> 00:02:43,033 Okay, but let's just remove it here for a second, 52 52 00:02:44,900 --> 00:02:47,390 just so you can see what it looks like. 53 53 00:02:47,390 --> 00:02:50,570 And so, maybe you can see, or maybe it's too small 54 54 00:02:52,800 --> 00:02:57,800 but notice that it's like really pixelated and really ugly. 55 55 00:02:57,800 --> 00:03:01,800 And so, I created this filter basically, 56 56 00:03:01,800 --> 00:03:03,990 and so it makes it look like this. 57 57 00:03:03,990 --> 00:03:07,880 So it hides the fact that it is actually way too small 58 58 00:03:07,880 --> 00:03:08,973 for its size. 59 59 00:03:11,160 --> 00:03:12,573 So let's put it back here. 60 60 00:03:14,200 --> 00:03:18,720 And so this is what this class looks like. 61 61 00:03:18,720 --> 00:03:20,850 It's simply a blur filter. 62 62 00:03:20,850 --> 00:03:24,683 And so modern CSS allows us to do this really cool effect. 63 63 00:03:27,380 --> 00:03:31,550 So, let's implement this and that's actually not too hard 64 64 00:03:31,550 --> 00:03:34,773 using the Intersection Observer API, one more time. 65 65 00:03:40,276 --> 00:03:44,030 So lazy loading images and so once again, 66 66 00:03:44,030 --> 00:03:47,060 this one is really great for performance 67 67 00:03:47,060 --> 00:03:50,940 while the other things we did so far are more visual things. 68 68 00:03:50,940 --> 00:03:54,270 This one really impacts how your site works and especially 69 69 00:03:54,270 --> 00:03:57,860 for your users who might have a slow internet connection 70 70 00:03:57,860 --> 00:04:01,310 or a low data plan or a slow cell phone. 71 71 00:04:01,310 --> 00:04:04,430 And we always have to think about these users as well. 72 72 00:04:04,430 --> 00:04:07,540 Not everyone has a super high end computer 73 73 00:04:07,540 --> 00:04:08,923 or the latest phone. 74 74 00:04:10,950 --> 00:04:14,123 Anyway, let's start by selecting our images, 75 75 00:04:15,800 --> 00:04:17,483 let's call them image targets. 76 76 00:04:19,000 --> 00:04:22,120 And this selector is gonna be 77 77 00:04:22,120 --> 00:04:25,460 a little bit different this time 78 78 00:04:25,460 --> 00:04:28,593 because we don't want to select all the images. 79 79 00:04:30,110 --> 00:04:33,250 So, we could simply do a selector of image 80 80 00:04:33,250 --> 00:04:36,130 and that would then give us all the images. 81 81 00:04:36,130 --> 00:04:40,580 But however not all of them are gonna be lazy loaded, 82 82 00:04:40,580 --> 00:04:42,490 for example, this one here, 83 83 00:04:42,490 --> 00:04:45,050 or we have some down here somewhere. 84 84 00:04:45,050 --> 00:04:48,930 So these avatars here or even this logo, 85 85 00:04:48,930 --> 00:04:51,070 so these are not lazy loaded. 86 86 00:04:51,070 --> 00:04:53,760 And so, the ones that will be lazy loaded 87 87 00:04:53,760 --> 00:04:56,630 are the ones that have this attribute here. 88 88 00:04:56,630 --> 00:04:58,820 So, this data-src attribute 89 89 00:04:58,820 --> 00:05:00,610 because that's where we specified 90 90 00:05:00,610 --> 00:05:03,400 the real high resolution picture. 91 91 00:05:03,400 --> 00:05:06,000 And so we can actually select four elements 92 92 00:05:06,000 --> 00:05:08,163 which contain this property. 93 93 00:05:09,490 --> 00:05:11,390 So if you're familiar with CSS, 94 94 00:05:11,390 --> 00:05:13,580 maybe you know how to do that 95 95 00:05:13,580 --> 00:05:16,450 but in case you're not, this is how it works. 96 96 00:05:16,450 --> 00:05:19,520 So we select all the images which have 97 97 00:05:19,520 --> 00:05:24,160 the property of data-src. 98 98 00:05:24,160 --> 00:05:24,993 And that's it. 99 99 00:05:26,030 --> 00:05:29,870 So, let's check that just to be sure 100 100 00:05:29,870 --> 00:05:31,163 so that it's gonna work. 101 101 00:05:32,270 --> 00:05:35,860 And so, indeed here we have these three images 102 102 00:05:38,310 --> 00:05:39,423 and nothing else. 103 103 00:05:42,770 --> 00:05:45,460 Then let's create our image observer 104 104 00:05:45,460 --> 00:05:47,253 and so this is not always the same. 105 105 00:05:51,040 --> 00:05:52,400 Here's our callback function, 106 106 00:05:52,400 --> 00:05:55,660 which I'm gonna call load image in a second 107 107 00:05:55,660 --> 00:05:57,400 and then all options. 108 108 00:05:57,400 --> 00:06:01,200 And now, let's attach this image observer here basically 109 109 00:06:01,200 --> 00:06:03,533 to all these targets. 110 110 00:06:04,880 --> 00:06:08,390 So I'm gonna loop one more time over our targets 111 111 00:06:08,390 --> 00:06:10,913 just like we did with this section previously. 112 112 00:06:14,590 --> 00:06:17,430 And this time, let's actually use an arrow function 113 113 00:06:17,430 --> 00:06:20,970 because all we want to do is to use the image observer 114 114 00:06:20,970 --> 00:06:25,540 that we created previously to observe each image. 115 115 00:06:28,570 --> 00:06:31,140 Now let's create that callback function 116 116 00:06:31,140 --> 00:06:33,593 here also pretty fast. 117 117 00:06:37,528 --> 00:06:40,833 So it gets the entries and also the observer. 118 118 00:06:45,410 --> 00:06:47,760 Okay, that's always starting 119 119 00:06:47,760 --> 00:06:50,070 with the options here and again, 120 120 00:06:50,070 --> 00:06:53,140 the route set to the entire viewport 121 121 00:06:53,140 --> 00:06:56,333 and let's start with the threshold at zero, 122 122 00:06:57,570 --> 00:07:00,240 and then we can adjust it as we go. 123 123 00:07:00,240 --> 00:07:04,770 But what matters really here is a disc callback function. 124 124 00:07:04,770 --> 00:07:07,793 So as always, this is where our functionality is. 125 125 00:07:08,770 --> 00:07:13,603 And so again, we have only one threshold, so only one entry. 126 126 00:07:14,510 --> 00:07:15,823 So I'm getting that tier. 127 127 00:07:18,770 --> 00:07:23,523 and now, let's check out actually this entry. 128 128 00:07:29,746 --> 00:07:32,983 So here we already got three of them, 129 129 00:07:34,030 --> 00:07:37,020 but all of them are not yet intersecting. 130 130 00:07:37,020 --> 00:07:39,020 Well, actually it says that this one is, 131 131 00:07:40,600 --> 00:07:43,823 well, but it isn't really because it's down here. 132 132 00:07:45,810 --> 00:07:47,183 So, that's a bit weird. 133 133 00:07:48,070 --> 00:07:51,380 Oh, but of course this still comes from the sections. 134 134 00:07:51,380 --> 00:07:54,033 So this is still coming from up here somewhere. 135 135 00:07:55,020 --> 00:07:57,723 Okay, let's delete it here from the sections. 136 136 00:08:03,390 --> 00:08:05,090 And now, let's see if it's working 137 137 00:08:06,140 --> 00:08:08,363 and now it is indeed an image. 138 138 00:08:10,270 --> 00:08:13,340 Now, it appeared a little bit before 139 139 00:08:13,340 --> 00:08:16,050 and that's because remember that our sections 140 140 00:08:16,050 --> 00:08:17,890 are actually a little bit shifted 141 141 00:08:19,200 --> 00:08:21,980 because of this hidden class that we added to them, 142 142 00:08:21,980 --> 00:08:23,963 they are shifted 8rem down. 143 143 00:08:25,699 --> 00:08:27,193 So remember that from here. 144 144 00:08:29,900 --> 00:08:31,010 Let's see. 145 145 00:08:31,010 --> 00:08:33,720 Yeah, so because of this translate here, 146 146 00:08:33,720 --> 00:08:35,930 they have moved 8rem down. 147 147 00:08:35,930 --> 00:08:37,510 And so, then therefore, 148 148 00:08:37,510 --> 00:08:40,270 this event will fire a little bit early 149 149 00:08:40,270 --> 00:08:41,913 but that's not a problem at all. 150 150 00:08:45,780 --> 00:08:48,660 What matters is that the event fired correctly 151 151 00:08:48,660 --> 00:08:50,683 and that it is indeed intersecting. 152 152 00:08:51,890 --> 00:08:54,900 Let's just clear it here to wait for the next ones. 153 153 00:08:54,900 --> 00:08:58,493 And so, here you get to the next one already. 154 154 00:09:00,315 --> 00:09:03,353 And so, that is indeed this next lazy image here. 155 155 00:09:04,610 --> 00:09:06,853 And then the next one here as well. 156 156 00:09:09,400 --> 00:09:12,620 So this one, okay. 157 157 00:09:12,620 --> 00:09:14,680 And then, as we're moving out of them, 158 158 00:09:14,680 --> 00:09:16,140 then we get even more 159 159 00:09:17,040 --> 00:09:19,470 because now they are no longer intersecting. 160 160 00:09:19,470 --> 00:09:20,303 And so once again, 161 161 00:09:20,303 --> 00:09:22,290 we need to only do something 162 162 00:09:22,290 --> 00:09:24,453 if they are actually intersecting. 163 163 00:09:26,980 --> 00:09:30,720 So we're gonna use the same guard clause as before. 164 164 00:09:30,720 --> 00:09:32,773 So if they are not intersecting, 165 165 00:09:36,997 --> 00:09:39,333 then we want an early return. 166 166 00:09:40,200 --> 00:09:45,160 But otherwise we now want to replace the src attribute 167 167 00:09:45,160 --> 00:09:47,613 with the data.src. 168 168 00:09:50,020 --> 00:09:51,400 So as we reach the image, 169 169 00:09:51,400 --> 00:09:55,290 it's finally time to replace the placeholder image, 170 170 00:09:55,290 --> 00:09:57,221 which is at the src, 171 171 00:09:57,221 --> 00:10:00,620 with the one we actually want, which is data-src. 172 172 00:10:00,620 --> 00:10:03,920 So just like before, each of these images here 173 173 00:10:03,920 --> 00:10:08,183 is at target or actually at entry.target 174 174 00:10:10,390 --> 00:10:14,090 So that's the element that's currently being intersected 175 175 00:10:14,090 --> 00:10:19,090 and then .src= entry.target.dataset. 176 176 00:10:21,200 --> 00:10:24,200 Remember, that's where these special data properties 177 177 00:10:24,200 --> 00:10:27,713 are stored and then .src from there. 178 178 00:10:29,850 --> 00:10:33,023 So this is already the main functionality right here. 179 179 00:10:36,030 --> 00:10:41,030 So let's try that, but you will not really see it happening 180 180 00:10:41,140 --> 00:10:45,140 because there's still this blurry filter here on top. 181 181 00:10:45,140 --> 00:10:48,010 But if we inspect it now, we should already see 182 182 00:10:48,010 --> 00:10:52,950 that the src is now actually already the original image. 183 183 00:10:52,950 --> 00:10:55,160 So you see it that it's the really big one 184 184 00:10:55,160 --> 00:10:58,700 while the other ones are still the lazy ones. 185 185 00:10:58,700 --> 00:11:00,870 Well, at least this one, the second one, 186 186 00:11:00,870 --> 00:11:03,650 is already also the original one 187 187 00:11:03,650 --> 00:11:06,583 because it's already in the viewport two. 188 188 00:11:08,970 --> 00:11:12,560 So, that's great, that's working just fine. 189 189 00:11:12,560 --> 00:11:16,250 Now, all we need to do is to then remove that class 190 190 00:11:16,250 --> 00:11:18,280 that has this blurred filter. 191 191 00:11:18,280 --> 00:11:20,630 So, that's the lazy image class. 192 192 00:11:20,630 --> 00:11:22,730 Now, how do we do that? 193 193 00:11:22,730 --> 00:11:24,760 Well, it's a little bit tricky 194 194 00:11:24,760 --> 00:11:28,100 because this replacing of the src attribute 195 195 00:11:28,100 --> 00:11:31,370 actually basically happens behind the scenes. 196 196 00:11:31,370 --> 00:11:33,463 So JavaScript finds the new image 197 197 00:11:33,463 --> 00:11:36,220 that it should load and display here. 198 198 00:11:36,220 --> 00:11:38,300 And it does that behind the scenes. 199 199 00:11:38,300 --> 00:11:40,950 And once it's finished loading that image 200 200 00:11:40,950 --> 00:11:43,063 it will emit the load event. 201 201 00:11:44,290 --> 00:11:47,430 And the load event is just like any other event. 202 202 00:11:47,430 --> 00:11:49,530 And so we can just listen for it 203 203 00:11:49,530 --> 00:11:53,093 and then do something so on that image. 204 204 00:11:53,093 --> 00:11:57,980 So on that image, so that's entry.target, 205 205 00:11:57,980 --> 00:12:02,980 we can do, addEventListener, and listen for the load event. 206 206 00:12:08,800 --> 00:12:11,613 And actually, let me show you why it is important 207 207 00:12:11,613 --> 00:12:12,703 that we do this. 208 208 00:12:14,200 --> 00:12:16,240 So let's say that we removed 209 209 00:12:16,240 --> 00:12:18,440 that lazy image class right away. 210 210 00:12:20,140 --> 00:12:24,557 So entry.target.classList.remove lazy-img. 211 211 00:12:32,290 --> 00:12:34,533 Let's scroll up here, reload. 212 212 00:12:36,990 --> 00:12:40,460 And then, well, in this case, the loading happens so fast 213 213 00:12:40,460 --> 00:12:42,110 that we don't even see a problem. 214 214 00:12:42,980 --> 00:12:45,773 Maybe we can change that here in the network tab. 215 215 00:12:46,920 --> 00:12:49,440 So this is a completely new tab 216 216 00:12:49,440 --> 00:12:53,733 but what we can do here is to simulate or speed. 217 217 00:12:54,770 --> 00:12:58,423 So this is a bit too big here, actually, I guess. 218 218 00:13:01,200 --> 00:13:03,150 So I'm not used to the size, 219 219 00:13:03,150 --> 00:13:04,950 Let me make it a little bit smaller. 220 220 00:13:07,160 --> 00:13:10,493 So let's change the tier to fast or to slow 3G. 221 221 00:13:11,950 --> 00:13:14,803 And maybe then, we can see what happens. 222 222 00:13:18,880 --> 00:13:20,730 So it's not faking that these images 223 223 00:13:20,730 --> 00:13:22,910 are loading really slow. 224 224 00:13:22,910 --> 00:13:25,060 So did you see them here blurred now? 225 225 00:13:25,060 --> 00:13:28,040 So it's really blurred, you see, 226 226 00:13:28,040 --> 00:13:30,830 but we already removed the filter. 227 227 00:13:30,830 --> 00:13:32,950 And so, here you can see how the image 228 228 00:13:32,950 --> 00:13:35,283 is loading basically in the background. 229 229 00:13:36,280 --> 00:13:38,600 And so it's doing that really slow now 230 230 00:13:38,600 --> 00:13:41,120 because we said that we are on a slow network here 231 231 00:13:42,330 --> 00:13:44,140 and now you see it's finished here 232 232 00:13:44,140 --> 00:13:47,900 and now the original image is being displayed. 233 233 00:13:47,900 --> 00:13:49,810 So, hopefully you could see that. 234 234 00:13:49,810 --> 00:13:51,430 I'm not sure if the resolution 235 235 00:13:51,430 --> 00:13:54,600 of the video is gonna be good enough to see it 236 236 00:13:54,600 --> 00:13:56,293 but I did for sure see it. 237 237 00:13:57,510 --> 00:14:00,010 And tear actually now the same as happening. 238 238 00:14:00,010 --> 00:14:02,610 Let me increase the size of the window a bit, maybe. 239 239 00:14:05,160 --> 00:14:07,280 So you see it's pretty blurred 240 240 00:14:07,280 --> 00:14:10,900 but once it's gonna be finished you will then see the final 241 241 00:14:10,900 --> 00:14:13,313 and beautiful version showing up here. 242 242 00:14:15,250 --> 00:14:17,450 All right, so we're gonna come back 243 243 00:14:17,450 --> 00:14:21,740 to this network tab later when we start loading data 244 244 00:14:21,740 --> 00:14:24,570 from remote sources on the internet. 245 245 00:14:24,570 --> 00:14:28,620 So this is a very important top in browser tools 246 246 00:14:30,320 --> 00:14:31,730 but for now, it's also nice 247 247 00:14:31,730 --> 00:14:35,183 to see the images loading over time behind the scenes. 248 248 00:14:36,200 --> 00:14:38,190 Well, it's taking a lot of time 249 249 00:14:38,190 --> 00:14:40,403 so let me just go back to the code here. 250 250 00:14:41,510 --> 00:14:44,920 And so yeah, now it's finished actually. 251 251 00:14:44,920 --> 00:14:47,380 And so by the time this loading finishes 252 252 00:14:47,380 --> 00:14:50,170 it will emit this load event. 253 253 00:14:50,170 --> 00:14:53,790 And so it is best to then only remove 254 254 00:14:53,790 --> 00:14:57,263 that blurry filter once that's done. 255 255 00:15:04,920 --> 00:15:07,810 So it's loading again very slow now 256 256 00:15:07,810 --> 00:15:10,660 and you see that now it keeps being blurred 257 257 00:15:10,660 --> 00:15:12,470 and it will only disappear 258 258 00:15:12,470 --> 00:15:14,903 once the image is in fact loaded. 259 259 00:15:16,000 --> 00:15:17,550 So I'm not gonna wait for that 260 260 00:15:17,550 --> 00:15:20,253 because it seems like it's gonna take forever. 261 261 00:15:22,050 --> 00:15:25,150 Oh, actually it's already done here. 262 262 00:15:25,150 --> 00:15:28,010 And so, you'll see now the image is downloading 263 263 00:15:28,010 --> 00:15:30,660 and at the same time the filter appeared 264 264 00:15:30,660 --> 00:15:32,590 or actually disappeared. 265 265 00:15:32,590 --> 00:15:34,193 Let's set it back to online. 266 266 00:15:35,100 --> 00:15:39,550 And so now all of it happens basically at the same time 267 267 00:15:39,550 --> 00:15:44,040 because we are working on our local development machine. 268 268 00:15:44,040 --> 00:15:46,580 And so there of course the image 269 269 00:15:46,580 --> 00:15:48,563 basically arrives instantaneously. 270 270 00:15:50,200 --> 00:15:54,580 Now as a last step, we can just, as we did before 271 271 00:15:54,580 --> 00:15:59,170 stop observing these images because it's no longer necessary 272 272 00:15:59,170 --> 00:16:02,053 we already did our task of loading. 273 273 00:16:03,170 --> 00:16:05,380 And so we no longer need this. 274 274 00:16:05,380 --> 00:16:09,563 So entry.target and that's it. 275 275 00:16:10,470 --> 00:16:13,260 So I hope that with this video, 276 276 00:16:13,260 --> 00:16:15,780 I could convince you that it's really important 277 277 00:16:15,780 --> 00:16:20,050 to implement this kind of functionality into your own sites. 278 278 00:16:20,050 --> 00:16:21,780 So, all you really need to do 279 279 00:16:21,780 --> 00:16:24,790 is to generate these placeholder images 280 280 00:16:24,790 --> 00:16:27,110 and blurred them a little bit 281 281 00:16:27,110 --> 00:16:29,580 and then implement this kind of logic, 282 282 00:16:29,580 --> 00:16:31,823 which really shouldn't be too much work. 283 283 00:16:34,650 --> 00:16:36,933 Let me just get rid of this console.log here. 284 284 00:16:38,150 --> 00:16:43,150 That's a loaded again, because actually we want probably 285 285 00:16:43,560 --> 00:16:45,560 to load the images a little bit 286 286 00:16:45,560 --> 00:16:48,060 before we actually reached them. 287 287 00:16:48,060 --> 00:16:51,190 So ideally we don't want our users to notice 288 288 00:16:51,190 --> 00:16:53,380 that we are lazy loading these images 289 289 00:16:54,800 --> 00:16:56,580 So all of this should basically happen 290 290 00:16:56,580 --> 00:17:00,340 in the background without our user noticing that. 291 291 00:17:00,340 --> 00:17:01,930 And so we should probably make these 292 292 00:17:01,930 --> 00:17:03,893 images load a little bit earlier. 293 293 00:17:05,440 --> 00:17:07,870 So to do that, we can again, 294 294 00:17:07,870 --> 00:17:11,160 specify a negative root margin here. 295 295 00:17:11,160 --> 00:17:16,160 So root margin of let's say minus 200 pixels. 296 296 00:17:19,213 --> 00:17:20,580 And so this is just the same 297 297 00:17:20,580 --> 00:17:23,990 as we did previously here with the navigation. 298 298 00:17:23,990 --> 00:17:26,320 So to make the navigation load a little bit 299 299 00:17:26,320 --> 00:17:29,160 before the threshold was actually reached 300 300 00:17:29,160 --> 00:17:31,170 and here we are doing the same 301 301 00:17:31,170 --> 00:17:35,430 so exactly 200 pixels before any of the images is loaded. 302 302 00:17:35,430 --> 00:17:38,220 It should already start loading. 303 303 00:17:38,220 --> 00:17:41,440 And by doing that we don't see any delay 304 304 00:17:41,440 --> 00:17:45,000 in loading when we browse the page. 305 305 00:17:45,000 --> 00:17:48,090 Well, actually that didn't quite work. 306 306 00:17:48,090 --> 00:17:50,490 Maybe it should be plus 200. 307 307 00:17:50,490 --> 00:17:52,370 So as you see, this is all a matter 308 308 00:17:52,370 --> 00:17:55,743 of trying out and figuring out as we go here. 309 309 00:17:57,192 --> 00:17:59,950 And so now indeed, as we approached the images, 310 310 00:17:59,950 --> 00:18:01,990 they're already fully loaded. 311 311 00:18:01,990 --> 00:18:06,513 So now that happens 200 pixels before we reach them. 312 312 00:18:09,280 --> 00:18:12,500 And with that, our functionality here is complete 313 313 00:18:12,500 --> 00:18:16,800 and we are now indeed almost finished with this project. 314 314 00:18:16,800 --> 00:18:21,363 All that's left to implement is really this slider. 315 315 00:18:22,900 --> 00:18:24,840 So this component here. 316 316 00:18:24,840 --> 00:18:27,803 And so that is what we're gonna do in the next video. 27582