CODEWITHSUNDEEP
htmlsplash-screenloader
Yatin
Yatin

Reputation: 3120

Loading screen example

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

Upvotes: 1

Views: 15254

Answers (6)

SpiderCode
SpiderCode

Reputation: 10122

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>

Upvotes: 2

immayankmodi
immayankmodi

Reputation: 8590

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.

Upvotes: 0

Bikas
Bikas

Reputation: 2759

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>

Upvotes: 4

Knx
Knx

Reputation: 107

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!

Upvotes: 0

user3222498
user3222498

Reputation:

Instead of

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

use 

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

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

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..!!

Upvotes: 0

Related Questions