How to Lazy Load Images with Ionic

what's up simonix and welcome back to a new quick win today we're talking about lazy loading this means if you have a lot of images on your page within your ionic application it could really slow down the page and by using a simple package for lazy loading images you could defer that loading to the right time when the user has scrolled until or to that image the package is both very easy to set up and use and also very flexible if you need to have some custom functionalities like adding your own http headers when making a load request to the image uh defining a default image that will be shown one until the image is ready having an error image um and i don't know a lot of css options and other custom hooks that you can use to really make this plug-in work with your application as always link to the quick win below the video available for all ionic academy members and if you're not yet a member go check it out ionicacademy.com my place to help you with everything ionic so let's dive into our lazy load image application [Music] today [Music] all right to get started we simply need to bring up a new ionic application and then install the ng lazy load image package so this package is quite popular got a lot of stars on github and the implementation is actually pretty straightforward so let's give this a try in our application you can also generate a details page so we can test two different scenarios uh first of all we're going to move into the module file of our page the documentation describes that we should usually add this to the app module but if you have lazy loaded modules like we do have uh we're gonna have to edit in here so i'm gonna add the lazy load image module to the imports of my home module and uh now let's let's stick with this um the easiest way to do this is actually to bring up ionic surf that would be great perhaps i already got it somewhere let's see okay there we go so i got this application i just added a button so we can go to the details page nothing really fancy so far uh let's close this and move it here and make it a bit smaller and there we go all right now we're ready and the easiest way is really to just define two images and see how the package works first of all so let's go to the home is there the where's my home ts there we go uh i had these two images from unsplash feel free to just pick any random image from the internet um the idea is that we have one image which will be lazy loaded and we have a default image now of course having a default image which will be displayed immediately from another http link isn't really smart so i also added an simple image to the assets folder if you want to use this package i really recommend that your fallback or default image is within your application because otherwise having two html calls here isn't really very smart now let's move to the home page html and simply add a new image and all we need to define now is the default image that will be our default image and then we need the lazy load that should be our image great that's actually all we need for reference perhaps let's also check out the two images that we actually used okay this is the default and this is the image we actually want to load so this whatever is the default this is the image we want to see in the end uh right now we only see this image which is kind of strange because it should lazy load and actually it comes so we've already seen uh what is going on to make the process a bit more transparent during development you can also simply add debug true because the package underneath is the intersection observer and it observes the different states of your page so if you add debug true you can see the different states are states when the setup phase observer emit start loading mount image loading succeeded finally there are a lot of outputs and you can actually also hook into those outputs which we will also do in a second for now this is really the basic version if you want to have a quick solution for your application that would be actually enough you could add this pattern in all your image tags or you can also use it for the background um and then maybe have the default image within your application and then you would have lazy loading now we of course wanna check out a bit more of this package and also use um different options to improve the the usage i would say so the first step what we could do is add a bit of css to the home page as css there are a few css packages can we see them so we got ng lazy loading edit before the image is loaded ng lazy loaded when it's loaded and lazy loaded when it couldn't be loaded so there's really a lot that you could customize for example this was the next uh snippet i found somewhere i just increased the time a bit uh so we can see more of it which means when the image is finished loading so ng lazy loaded we're gonna change the opacity from zero to one so let's see this in action we got the first image and the second image comes this is already a bit better um if you have a loading so for example if i would use my default image to slash assets what was the name something like yeah academy jpeg save then i would have this as default in the places and then it actually loaded the wrong image perhaps this one took really long i used really the hybrid high quality version of this so it took a bit of course it doesn't make too much sense if you just have one image up here it makes more sense if you have a list with images or more images down the page so you can lazy load them at a later point and that's what we're gonna do with our details page we're already able to move to the details page so let's implement a few cool things within that details page uh i would say we start by closing our home page and adding the module in here to the details module once again and there we go and then we got the details page html and ts so let's uh simply add an ion card iteration so we can craft a little list of cards this is my little trick whenever i need a quick array that i can iterate um fills the airway with 10 or how many items you're gonna need then ion card content and within the content we're gonna put an image lazy load let's use another unsplash url that i picked somewhere and there we go actually don't know what's happening if i don't add a default i can't say a property of image um yeah that should be lazy load thanks actually nice code completion within html it was pretty cool okay if i don't have a default fallback it will just use this one now i found that specifying the fallback image like we did in here is quite well not the best idea i would say because if you have this image or whatever tech you're going to use with lazy loading in different pages all across your application always specifying the default images is kind of boring and not really a good pattern if you want to change it somewhere and now enter the nice hooks from this module can we can we see the hooks uh did i close it oh i closed it no i didn't close it they got a lot of folks um they have a nice description of the api what you can set on the image tag like error image offset scroll type blah blah blah a lot of these things the different events we've already seen with debug true and then the hooks so for the hooks what we need to do is i'm just going to copy this we will change this to our needs in a second you're going to define your custom class which extends the intersection observer hooks also coming from the package attributes most likely also from that package and then you can override certain functionalities can we see them in here uh where were they uh we will see them in a second uh let's finish the setup because if you add this custom class you're also going to add this provider's array which usually isn't inside the ng module of your generated ionic page but that's not a big deal so we will now say just like we do when we use custom http interceptors or any custom class somewhere i found them uh yeah here they are get observable is visible load image set loaded image setup finally so we could overwrite now all of these different hooks and a few of them definitely make sense the first example is loading an image which shows how to make a simple fetch call or this could be an http get where you can attach your headers if the images that you plan to lazy load are behind some sort of authentication um that's a really nice example um well for now we're gonna do something else uh we wanna uh change the setup set up uh what comes in here i think attributes attributes and then we can override the setup so now we could change the attributes that we usually set directly on the element right here for example the offset number of pixels to use as offset so when the loading of the image stood should start um maybe you want to define this globally maybe not but more interesting might be something like having the default image pad right in here so now we can use once again assets academy jpeg of course uh make sure you add an image to your assets folder or you could have an error image as well i used this one i found this actually on the github page it's just this one and then once you're done you just need to return the call to super so the actual uh regular implementation of setup is called with our own attributes um of course super dot setup not just super all right let's see the changes in action and we see we now got our default image once again we also got this offset so we already see um i think not all of the images are loading that we see it's still blue and now it's loading and we can now go down and the loading for the rest of the images starts that means um the usage is a lot easier because we now just need the lazy loaded image and we don't need to care about the default image since we set this with those hooks i found this system to be really a very great idea by the creator of this package and it makes it really flexible and works for a lot of cases for example the one we've seen with the authentication header is definitely something uh you might need so let's also try out our aero image pad for this i'll just add another card with a lazy load and a failed url let's see and the layouts and we see of course this can't be found so we get our default fallback image or the default error image this is like the the fallback default image and this is now the error image and finally uh you could also use uh as ink pipe within this tag if you are still retrieving the image that can come in really handy so let's do a quick example for that as well uh we're just gonna open our class here and add my image observable type any thanks for the closing text i really sometimes i don't really need those closing texts um and then we're gonna load the image i was too lazy for this example to include the http client so i just used fetch which makes it a bit more challenging because fetch returns a promise so we need to wrap it with from and this call also returns actually in here it returns automatically an image but usually i'm just going to add a lock for you because today is a good day let's lock data so you're going to see that the data property or the data json that we fetched from this url actually includes a url uh let's do this home page no we're on the details page ion button click yeah i never spell click correctly load image and i also got a new keyboard might tell you more about this in the future so sorry for a lot of typos in the current and upcoming videos it's a bit bigger than the one i had before so really my hands need to get used to this but i know you're not really interested in that anyway okay uh when i now press load image we should see a little lock here do i actually call this i know i know i know i know uh since it's now an observable and not a promise anymore i would also have to damn i would have to subscribe and then everyone would be sad because it's not an observable anymore this is really challenging i just wanted to show you something simple uh whatever can we just get the damn look of this yeah now you're sad about something uh my image subscribe why are you actually sad about that um let's see not sure if this is going to happen okay there's the data from the api so that includes an image and we want to display that image so you might have an observable your observable might be looking different but the main important thing is that you could now easily add something like this you could still use lazy load and then the edging pipe on my image so my image is the observable on our page um this pipeline just makes sure that we return the real url value and then we have a lazy loaded lazy image no lazy loaded uh as ink image whenever we press load we will get a new image we quickly see the default image until the real image is finished and that's another usage of this package so once again sorry for the fetch logic basically it would be like this dot my image yeah whatever this token means this dot come on what's going on this done my image once again the keyboard so something like this dot htp get your url and that would be your observable that's basically the same like using fetch only a bit different more angular kind of way and now i also don't need to subscribe to it manually and we can make this once again easier and just use data dot url in here to make the short form as we're just interested in the observable the essing pipe will handle the subscription now these are a few cases where the package comes in really handy um just want to show you one more case for the hooks i also added for example a hook when the image loads that was the one we initially had in the example as well you could also add to the class of course a constructor where you inject your own properties or dependencies like the toast controller and make sure you call super within the constructor if you extend another class and then you could for example a super helpful example call yes switch map and from um you could overwrite the load image function and create a toast controller while it's loading present the toast and in the end call super load image with the attribute so you're just hooking into the system it will still call the default load image you could also make your own http call now or add some kind of header or do whatever you want and now whenever the image loads we should can't resolve for lazy what do we do wrong do we add the toast controller yeah we have the toast um i think i messed up the class what's wrong with you why are you unhappy um oh yeah my injectable is missing so we of course need to add in injectable here and then everyone should be happy once again okay um there we go let's open the details page and then we see the little toast here whenever i press this and the load image would be called our own toast would be triggered uh you could do whatever you want in that case and now you could basically uh take this so your own implementation or you extend the intersection observer hooks into another class um might not be the best place to have this in some kind of lazy loaded module um so i would put this into your own file so you can easily use this in all the places where you need the lazy load image module but these are just two examples where you could change the default within the setup or you could overwrite the load image if you check out the documentation for the hooks there are a lot more to actually get the observable check if something is visible you could also pass in your own inter your own where is it your own scroll listener so instead of using the default intersection observer you could change this to observe the scroll within a specific container which might be handy if you're using it within ion slides i found this to work actually pretty good within the default ion content ion list setup even on this page i read some comments where people had problems but so far this worked for me nice uh both within the browser and on a device only problem is of course the internet explorer in that case you might have to add a polyfill uh somewhere mention yeah make sure you include intersection if you need to target internet explorer um so that's just a quick word of warning but otherwise the default is pretty easy to implement just include the package and use the default and lazy loaded image and if you want to customize it more specify the default image for all the places and the fallback image for the error case and perhaps add your own headers everything is possible with ng lazy load image and the custom hook system all right and that's it for today i really hope you enjoyed this quick win on using the lazy load image package i found this package to be really really great i used other things in the past and this one worked actually pretty good the default our basic version all automatically worked right out of the box and also with the hooks we're able to customize this exactly to the needs of our application might be custom headers might be any sort of loading logic or anything else that you need to put into this lazy loading flow of loading or showing or not showing having a default fallback and all of that uh one quick note uh lazy loading isn't everything um if you enter the page a second time the images would still be load because that would otherwise be a place for caching the resources the images or the requests inside your application so lazy loading isn't really caching and also if you have a huge list of objects that all have an image you might be better off by using a virtual list instead of just having lazy load because if you have like 10k objects within a list that's always a bit hard for the dump to show and to load so that's just a word of caution uh lazy loading isn't everything if you want to see something about api caching just let me know in the comments and also if you're not yet a member of the ionic academy go check it out now ionicacademy.com my place to help you with everything ionic i hope you enjoyed it click the like and subscribe button so you get notified about the next videos and i will catch you next week like always so happy coding [Music] simon

Channel: Simon Grimm

Views: 4,597

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: gKhUKKP2IRE

Length: 22min 23sec (1343 seconds)

Published: Tue Apr 27 2021