Pre-loader Image at page load issue

I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way

This is my Page link

HTML: (Div for loading Pre-loader image)

 <div class="se-pre-con"></div>

JavaScript
​x
 
 <div class="se-pre-con"></div>
​

Jquery to trigger the pre-loader on page load

  $(window).load(function() {
      // Animate loader off screen
      $(".se-pre-con").fadeOut();
  });

JavaScript
 
  $(window).load(function() {
      // Animate loader off screen
      $(".se-pre-con").fadeOut();
  });
​

A bit of Styling . CSS

 <style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}

JavaScript
 
 <style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
​

Problem When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?

Regards

Answer

I think your HTML isn’t well formatted on the link you provided:

What I would do is make sure the HTML page has a structure similar to this:

<html>
    <head>
    <script>
    </script>
    </head>
    <body>
        <div class="se-pre-con"></div>
        <div class="site-content"></div>
    </body>
</html>

JavaScript
 
<html>
    <head>
    <script>
    </script>
    </head>
    <body>
        <div class="se-pre-con"></div>
        <div class="site-content"></div>
    </body>
</html>
​

And inside your script tag have the following method:

 $(window).load(function() {
    $(".site-content").show(); //or fadeIn (what ever suits your needs)
    $(".se-pre-con").fadeOut();
 });

JavaScript
 
 $(window).load(function() {
    $(".site-content").show(); //or fadeIn (what ever suits your needs)
    $(".se-pre-con").fadeOut();
 });
​

And in your css make sure you set

.site-content{     
    display: none;
 }

JavaScript
 
.site-content{     
    display: none;
 }
​

EDIT: (To answer your question in comment- call loader at any time)

I would probably create a function like this:

function toggleLoader(show){
     if(show == true){
        $(".se-pre-con").show();
        $(".site-content").fadeOut();
     }
     else{
        $(".site-content").show();
        $(".se-pre-con").fadeOut();

     }
}

JavaScript
 
function toggleLoader(show){
     if(show == true){
        $(".se-pre-con").show();
        $(".site-content").fadeOut();
     }
     else{
        $(".site-content").show();
        $(".se-pre-con").fadeOut();
​
     }
}
​

Then on window load you would call: toggleLoader(false),

When you make a request call: toggleLoader(true),

And when you receive a response call: toggleLoader(false).

Advertisement

Answer