Published by Rienz on

Some of our apps like landing or login page, We use background image to make it more beautiful and presentable. It loads fine when its on our local but when we deploy it in our production server, most of us encounter the background image delays to load, probably its because the image is too large or maybe the user’s internet is too slow. Now we want to avoid it because it makes our app looks plain, awful and sometimes weird.

In this topic we’re going to use a resolver to load and check if the background image is loaded before going to the current page. I will start from creating a new app using angular cli so most of you can follow, I assume that you already installed npm and angular cli.

Here’s the project Github link, to check parallel while your following this article or you want to jump to the finished version and do some experiments.

 

Now that we know the introduction of this topic. Let’s get started.

 

 

Create New Project

Using your terminal, First we will create a new app called “load-background-first”.

ng new load-background-first --routing

It would take a while but after its finish, It will create a new folder called “load-background-first” with the Angular libraries and its dependencies in it. We also used the flag routing since we’re going to use the routing resolver to do this trick.

If your using Visual Code Studio you can run this command below to proceed to the project and if not then open the folder with your preferred IDE.

code load-background-first -r

Run the application to see if our application is working

ng serve

Lastly, remove every element in your src/app.component.ts except <router-outlet></router-outlet>

 

 

Setup Loading Screen

Now that out app is running, we will just add few styles to make our app look decent. go to src/styles.css and add the styles below:

In src/assets/css/loading.css paste the following styles below:

Then include the loading.css and add the following elements in src/index.html inside <app-root></app-root>

We already add the loading.css in our index.html so that it could load the loading styles before the app runs. However for now you can see can barely see the loading page since the page loads fast. If you want to see the loading screen just add a route without a component in src/app-routing.module.ts.

It wont load the page since you don’t specify the component for the current path. In short it will load forever 🙁 but we will fix that later so now worries.

 

 

Adding the Background Image

Search for any background image you like on google and download it or anything that you have on your local device then add that image inside src/assets/img folder and name it as bg.jpg

 

Creating Main Page

First we must create a layout component. This holds our page layout like the nav, header, footer.

ng g c layout

Then lets improve our layout by adding HTML elements and few lines of CSS just to make it look more interesting.


Next we add the Layout Component to our routes in app-routing.module.ts as the parent component.

Now you will see your layout component in your page and the loading screen will gone once the page loads.

no background yet image

 

 

Background Image Resolver

Create a folder called “resolvers” in src/app inside the created folder create a file background-image.resolver.ts and copy the code below (don’t worry I will explain everything one by one later).

Since we used HttpClient, we also need to include the HttpClientModule in our app.module.ts

 

Then include the BackgroundImageResolver to app-routing.module.ts in your route resolver and also add it in your providers.

To explain whats going on in our BackgroundImageResolver, lets look at it line by line.

  • First, we used our HttpClient to get our background image and config the responseType into blob since it is a image file.


  • Then we used the Rxjs pipe to use the Rxjs map to transform the return data. and by that we generate our blob file into an image.


  • In order for us to use the image as our background image we need to assign a url for that image.


  • You might not be familiar with the last line and I also just encounter this DomSanitizer on this project but basically (but not basic) it helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts. Without this we wont able to use our image as our Background.




     

 

 

The Final Touch

Now the last thing to do is add the background image to our element.

Include ActivatedRoute in LayoutComponent to be able for us to get the resolver data then assign it to our backgroundImage property.

Lastly, add the backgroundImage property to our main element as style directive value of background image.

So yeah thats it, If you follow correctly this would be the final output but surely with a different image 😀

Note: It loads fast after second refresh so you might want to disable cache to see the loading screen more longer.

loaded background image

 

Load More Related Articles
Load More By john
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Why you should probably be using a design system (and how to build one)

Steps to scale-up your UI as a developer Perhaps you’ve heard the whispers amongst the mar…