How to lazy load images

hey there my name is Kevin and if you're new here or you haven't been around for a little while I've been doing a little exploration into intersection observers which are really cool and let us do some awesome stuff with JavaScript and know where we are on the page and they're the perfect type of thing to use for lazy loading images so in this video we're gonna be seeing exactly how we can do that let's go and check it out all right so it's time to lazy load our images we're back on this same file that I'm working on up until now but I have made a separate J's file just to keep it a little bit cleaner as usual the beginning code and finish code there are links to it both down below for github repos of those so if you want to follow along you can alright so we're in the same file that we've been using up until now to look at event listeners but I have made one big change to it so we can see right now my navigation will change those things will fade in but my images are not appearing at all and the reason for that as you can see here my markup I've changed all my image sources two data sources and so the browser is going to do nothing with that but we can reference it with our JavaScript to tell it when to load the images in now this is going to be very similar to how we did the fading in effect but there is one big difference that we want to use to get it to work properly so the very first thing that we want to do is we want to find all of our images so we're gonna do a document dot query selector all and what I want to do on this one is the easiest thing I think is to just reference any image or anything I guess that has the data SRC attribute on it so it's not going to reference all images only ones we've set up for lazy loading by not giving them a source but just by giving them the the data SRC attribute so anything you put in a query selector is effectively a CSS selector so if you just put in like you know body you would select your body if you put in dot selector it finds that class you can put in an ID so if you put something in CSS with inside of your square brackets it is looking for the attribute so in this case we're finding anything with the data SRC attribute on it and that will be the images that I want to load in the other thing let's make a our observers we'll just call that image observer is equal to at this point a new intersection observer if you haven't watched my previous videos on intersection observer I didn't recommend at least going back to the very first one where I introduced the whole concept of it because I'm not going to be diving deep into all the little things I'm doing right here I'm just gonna be looking at how we can set it up for this one specific case so if something along the way confuses you go and reference back to the very first video where I really did a deep dive on how intersection observers work and this one will probably make a lot more sense but if you've been following along it won't be anything to you new here except I'll do a arrow function here instead of my regular function so we can do an arrow function like that and then after that where you can bring in my options so let's just call it image options for the options not to give us an error we do want to bring those up here so image options is equal to and once again we'll leave it blank for now just because we have nothing to put there but we will be putting in some options a little bit later on we do want two arguments here for my function so we're going to look at entries and we're gonna look at image of server because we want to reference back to itself a little bit later and now we can start getting some stuff going on here so as usual we have to do our entries and do a for each and so for each entry we want to do something so our function is going to be we sort of want to do the same thing as last time if we can return right away so we can say if it is entry is intersecting so if it isn't intersecting because of the exclamation mark there so if entry is intersecting is false right away we can just return else so when it is intersecting we want to load in our image so what we can do for that is I think in this case I'm actually going to bring it in as a separate function so let's I think it'll be a bit of an easier way to organize everything here up until now I've been putting everything in the observer itself but it can get a little bit messy when you do that so why don't we pull this out and put it into its own little spot so what we're gonna do here is preload image entry whoops entry target and at the same time that we can then do a image observer on observe entry target so just like we did last time when we did these sliding these things letting in once we've pre-loaded our image we want to stop observing it because we've done what we've wanted to do we don't have to keep observing that image anymore so now this obviously isn't going to work yet because we haven't set up this preload images so let's go and do that so for that I'm actually going to come all the way up here now you could actually bring this one down lower but I find it easier to first set it up up here so I'm going to say function a preload image we need to give it an image for it to work and then what do we need to do we're going to define a our source so our source is going to be equal to the image that we give it and we can get a tree beaut of data SRC so we're just we're pretty much we're gonna have a function every time we run this function we're gonna give it something so as long as the thing it's an image that gets put in here so this could be like one of our images is gonna be put in there it's gonna look at that image that we've put here and it's gonna get the attribute data SRC from it then what we want to do is take that data SRC actually before that even we want to say if there is no SRC we want to return right so if if something happens and for some reason though something weird gets put in there there is no data SRC that gets loaded in let's get out of there because we don't want anything to happen in that case but if the image we have given it does have a data SRC we want to take the image SRC and make it that so this first one here is the actual image source like if you are looking at an image in your in your dom we're looking at the images source and we're going to set it to SRC which is this constant that we've created right here so we're setting the image attribute data SRC to SRC that SRC comes to here which then it's applied to the image that we've just fed into this function so now what we can do is we can come down to here and what we can say is images for each because remember our when we did our document our your query selector all here we're creating a list and we can't apply one observer to the entire list we have to apply it to each one of them so for for each image so out of all the images in it for each image inside of images we want to run our image observer and we want to tell it to observe that image so for every image observe the image just like we've been doing from the very very beginning and it should work and and I've made a big mistake and I for some reason they keep doing this you might have seen me tweet about it actually when I was playing with this and I put its intersection instead of is intersecting so of course is intersection is always false because it doesn't know what it is so it's how it's never gonna work so I want to switch that over to is intersecting I have this really bad habit if what is intersection I'm not sure why that happens so often and I never find it so if we do that now we should see as I come down my well actually hey there we go you can see the images like they're sort of stuttering a little as I come in because they're they're actually are being loaded in now what I'm going to do to really show that this is actually working is I'm going to do I'm going to take in my image options here I'm gonna do two things I'm gonna change the threshold to be one and then when I come in here and set a root margin root margin I'm gonna set to zero pixels zero pixels the bottom I'm going to negative 500 pixels which is me a lot but it should work anyway if you're not sure what I'm doing or why I'm setting this up or what it means please go and check out that first video where I explored all of this in a lot more detail so by doing that now just really quickly I'm gonna jump over to my CSS file just to show you on my images off screen I added a border on here so we're gonna be able to see it and I've given them a min width and a min height so you can actually see this is where my image should be and the border on here which is red will only come in once this actually kicks into effect because right now it's a broken image so the border won't work on it and I've also turned off all my transitions and opacity and stuff just so we can really see this working in action so once it's 500 pixels within the viewport you can see it turned red and then it loads in and then the next one turns red loads in and so on and so forth now I'm loading these from unsplash so it's a little bit slower than it might be and I can never get to my last one because it's never going to be far enough in now obviously I don't want to actually be loading them in when they're 500 pixels into the screen that defeats the entire purpose of lazy loading images so what you might do instead of this the threshold would be zero so it's you you want to as soon as you get into this space and you have this as a positive number so like two or three hundred pixels away so by doing this what it means is now instead of being negative 500 so instead of inside the viewport by 500 pixels it's when it's 300 pixels before the viewport so any image that's just off of the screen is going or if it's already on the screen it'll load in right away if you had one that happened to be there but that means as I go down my images are loading before I get to them now you can see that one actually kicked in a little bit after because it's taking a little while for these to load because they're coming from that off source so maybe even if your if you do see that this is causing problems you could push that number up a little bit higher as well now one thing I really recommend that you do I don't have an example of it here right now but based on the research I did if you have several images that are next to each other but say like Bhandup if you had like five images here and then another row of images there and you want to make sure that they lazy load separately just know that when you're it by default your images have like a 0 by 0 pixel so you might load in a whole bunch of pictures you don't actually mean to load yet so I would recommend this could even be like anything that has your data data SRC on it so any attribute data SRC obviously you're not gonna give it the red border but you might want to give it a min width and a min height just to make sure it's taking up a little bit of space but again it hopefully if everything goes well if as long as everything goes well when you load in your page they should be loading before they get to that so again you might want to experiment with it but again I'm loading from unsplash so it's much much slower than if I was loading from my own source but if you do need to make that a bigger number by all means you could go and do that so many cool things you can do with intersection observers if you haven't seen the other videos in this series if you want to see some this one was more of like a practical use for it where it's just really good for performance but in the other parts of the series I did look at cool stuff you can do with it from sliding stuff to the navigation that sort of fades knowing you have a transparent background and then it changes when you scroll further down so we looked at how we can do those strongly encourage you to go and check those out if that sounds interesting to you at the very least but if not thank you for watching this one I hope you learned something along the way if you haven't yet subscribed and you like this video and you like the other ones in the series please consider subscribing and if you really want to make sure you never miss anything I do check out my newsletter it's down in the description but you're lower there to show up on the sidebar at one point and it's just a look at it just it makes sure you don't miss anything that I'm up to plus a little bit of bonus stuff every now and then as well a big thank you to my patrons for helping support everything I do here on this channel thank you guys so much for your continued support it really means a lot to me and it helps me keep doing everything I do here and of course a big thank you to my supporters of Awesome with Fernando Lauren and Jonathan you guys just thank you very much for your very generous support I really look forward to seeing you there next week but until then don't forget to make your corn of the Internet just a little bit more awesome I don't why am i I don't know why I was holding my hands like that that's gonna weird Oh see you later

Channel: Kevin Powell

Views: 77,047

Keywords: Kevin Powell, tutorial, html, css, lazy load, intersection observer, intersection observer lazy load, lazy load image, how to lazy load images, lazy loading images, lazy loading, lazy load images

Id: mC93zsEsSrg

Length: 12min 20sec (740 seconds)

Published: Wed Jul 03 2019