Loading screen example

Question

My HTML:

<html>
<head>
    <link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(window).load(function () {

            $("#loader").fadeOut("slow");

        })
    </script>

</head>
<body>
    <div id="loader"></div>
    <div id="page1">
        <p>
            <h1>Hello World !!!
            </h1>
        </p>
    </div>
</body>
</html>

CSS for loader :

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

I have used script which does different behaviour:

When I use div id = loader, it shows directly the hello world.

When I use div class = loader, it just shows loading gif image and does not go through the page.

I want to know the error for this program

You want the Hello World text to show up as if it is fading in? — Knx, Feb 05 '14 at 08:43
@Yatin a fiddle from http://jsfiddle.net/ - Just like a typical webpage editor but can be saved and shared to other people. Check my answer with a fiddle. Hope it helps! =) — Knx, Feb 05 '14 at 08:47
@SajadLfc although quite recommended, semicolons in JavaScript is optional. — Bikas, Feb 05 '14 at 08:48
Please reply to my answer posted below. I think that mightbe your issue — Bikas, Feb 05 '14 at 09:00
Yes that was the issue @bikas now I want to extend this for request response thing ... the question I posted for http://stackoverflow.com/questions/21570283/html5-request-response-webservice please check — Yatin, Feb 05 '14 at 09:08

score 4 · Accepted Answer · edited Feb 05 '14 at 08:51

4

Your code works perfectly fine. And for information $(document).ready() is better to use.

The way you've linked your CSS, I assume you're directly opening the HTML file, i.e. by double clicking on the file (correct me if I'm wrong). If this is the case then you've to correct your jQuery linking to:

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

edited Feb 05 '14 at 08:51

Knx

107
7

answered Feb 05 '14 at 08:46

Bikas

2,709
14
32

I want this program to extend to webservice hit request and response... how can I do it I have posted a similar question... but no concrete answer – Yatin Feb 05 '14 at 09:04
Drop me the URL of the question. I'll try solving that – Bikas Feb 05 '14 at 09:05
Get http://stackoverflow.com/questions/21570283/html5-request-response-webservice question I posted – Yatin Feb 05 '14 at 09:05

score 2 · Answer 2 · answered Feb 05 '14 at 08:55

Two problems with your both scenarios :

Problem 1 : When you apply class="loader" :

Here the problem is that when you use class="loader" your css applies to the div. and in javascript you are using $("#loader") instead of $(".loader")

Problem 2 : When you apply id="loader" :

Here the problem is that you remove the class="loader" and add id="loader" so your css will not be applied to the div.

Solution : Update your div with class as mentioned below :

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

Update your javascript as mentioned below :

<script type="text/javascript">
    $(window).load(function () {

        $("#divloader").fadeOut("slow");

    })
</script>

score 0 · Answer 3 · answered Feb 05 '14 at 08:41

problem: you are missing a semicolon ; at the end of the function

change to

 $(window).load(function () {

            $("#loader").fadeOut("slow");

        });

and add this too

$(document).ready(function(){
    $("#page1").fadeIn(3000)
});

don't forget to give style="display:none;" for div page1

Hope it helps..!!

score 0 · Answer 4 · answered Feb 05 '14 at 08:43

0

Instead of

$(window).load(function () {
 //your code
});

use

$(document).ready(function(){ 
 //your code
});

answered Feb 05 '14 at 08:43

score 0 · Answer 5 · answered Feb 05 '14 at 08:45

0

This gives the fadeIn effect you wish to have:

$(document).ready(function(){
            $('body').css('display', 'none');
            $("body").fadeIn("slow");

});

And here's a Fiddle.

Hope this helps!

answered Feb 05 '14 at 08:45

Knx

107
7

1

instead of `$('body').css('display', 'none'); $("body").fadeIn("slow");` you can simply do `$('body').hide().fadeIn("slow");` – Ashish Kumar Feb 05 '14 at 09:02
I never thought of .hide() in order to make the codes simpler and shorter, thanks @Ashish Kumar! =) – Knx Feb 05 '14 at 15:00

immayankmodi · Answer 6 · 2014-02-05T08:54:47.373

0

Try this:

HTML:

<div id="dvLoading"></div>

CSS:

#dvLoading
{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

SCRIPT:

<script>
$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});
</script>

Here is a reference and demo.

edited Feb 05 '14 at 08:54

answered Feb 05 '14 at 08:48

immayankmodi

8,210
9
38
55

Loading screen example

6 Answers6

Linked