In this Javascript tutorial, we will be using jQuery to create a simple Loading Screen for resource intensive websites. Many portfolio websites and photo intensive sites may require a good amount of time to load. Instead of having your user star at a blank white screen during that time, why not give them some feedback that shows the site is responding. Our solution will be a rather simple effect with a loading screen “slide card” that will reveal the site after a few seconds of loading. Let’s give it a try.

Our Setup

Let’s start by setting up our project. All we need is one <div> with an image placed within. This div will be fixed positioned over our entire site, and when the site is loaded, it will animated off the screen. Here is our markup.

There are a couple of things to point out. The first thing next to setting up the styles for our elements is to call to the jQuery library. Next, in case our loading screen div dynamically changes in size, we want our animated gif to to change as well so we set it’s width to 40%. When we create our CSS styling for the Loader div, it is important to keep fix the position of the div so when the user attempts to scroll, he will only see the loading screened fixed over the site.

The jQuery

Now that we have our markup ready, tested our site and see that the loading screen is completely covering the page, it’s time to create a function that will remove the screen once all the content is loaded. The key factor to making this work is to run a function only after the page is loaded.

Thankfully, jQuery has a method just for that called .load. The .load method is very similar to the .ready method you are familiar with, but instead of running a function at the beginning (or when the document/window is ready) it will run all contained functions once all the content it loaded. For this example though, we really don’t have a lot of content and will take almost no time to load. It is not necessary for larger loading sites but we will be utilizing the .delay() method to better simulate a loading screen. We provided three different animation options for removing the loading screen. Let’s take a look.

Animation Example #1

The first option is the shortest and easiest to read. This is a simple fading out animation that will execute 3 seconds after the site is done loading.

By using the .fadeOut method, we can write our code much faster. With jQuery’s helpful “chaining” ability, we can tie in the fadeOut method with the delay without have to use callback functions. It is important to note that .fadeOut will take two kinds of parameters, a string (either “fast” or “slow”) or a number (dictated in milliseconds like 4000).

Animation Example #2

Our next example replaces the .fadeOut method with the .animate method. This will allow us to have more flexibility and control over our loading screens animation. Instead of fading out, what if we wanted the div to slide up to reveal our site? This is where the .animate method will come in handy. Let’s take a look.

As you can see our setup is very similar to the first example but requires more parameters. The .animate method accepts four different parameters like so: .animate(properties[,duration][,easing][,complete]). Here is a brief overview:

  • Properties specify changes in CSS properties like height or top.
  • Duration specifies how long the animation will take.
  • Easing is a special parameter that allows you to add small animations to the beginning or end of animations.
  • Complete allows you to call a function to execute after the animation.

In our example, we use these parameters to tell the DOM, “After three seconds, animate the div up 2000px within 1s”.

Animation Example #3

Our last example is a variation of example #2 but with some added animations. We now want the loading screen to screen and fade out after the site is completely loaded. Let’s test it out.

By adding some more properties to the parameters, we are able to get different effects for our loading screen.

Wrapping It Up

By using the .load method along with the animation functions, we are able to control Div slides the hide and reveal the actual website. Keep practicing and take your project to the next level by using javascript to report the actual loading progress of your site.