How to create a loading screen while my content is still loading (intro)

1

Hey guys I have been searching the web for hours now and I cannot find a decent resource for this. I am working on my website and I will to add some cool loading screen while my content is loading in the background and when it’s done loading fades off or something similar .

I am trying to use jquery to accomplish this so here’s my code.

HTML (just under the body)


<div class="loader"></div>

CSS

/*loading screen*/
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../img/45.gif') 50% 50% no-repeat rgb(249,249,249);
	opacity: .8;
}

JQUERY

$(window).load(function() {
	$(".loader").fadeOut("fast");
});

Here is a screen shot of what happens the loading screen is still on after my site has completed loading.

Screenshot_6
Screenshot_61284×702 87.5 KB

I just need to know remove , fade or slide the loading screen OUT

Thanks for the help guy.

3

It’s strange that this isn’t working. Do you see any errors in your console?

4

Just an obvious question… do you have the jQuery script (CDN or local copy) loaded?

5

Yes there are other scripts for animation and so on and I do everything locally not with CDN

As for my console error here’s what I get:

Screenshot_7
Screenshot_71310×249 14.9 KB

Please I am still a n00b so I cannot say what is wrong in my code.

Thanks again guys

6

Hello, I am looking for help, I am even making a loading screen, but the content I put on the body has a lot of content and because the loading screen only covers half of all the content I put. Help, I am new. And excuse my English, I’m Mexican and I don’t speak much English