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

回答1:

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>

回答2:

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>

回答3:

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

回答4:

Instead of

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

use

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

回答5:

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!

回答6:

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.

来源：https://stackoverflow.com/questions/21572128/loading-screen-example

标签

html

splash-screen

loader