How to show page preloader only once while entering through domain name?

Question

So, I have jQuery page preloader on main page like this:

<script type="text/javascript">
    $(window).load(function() {
        $("#preloader").delay(700).fadeOut("slow");
    })

<div id="preloader" class="preloader"></div>

This shows 4 times:

1. When I enter the site through domain name;
2. When I refresh main page by F5;
3. When I click on logo (i must go to main page when i clicked that);
4. When I click «Home» menu item. But i want to show it only on first two times. So, the first idea which came in my mind is delete div class to not show preloader image over whole page when i clicking logo or menu item by JS. And have used this:

document.getElementById("preloader").className = 'test';

But then... I realized that by clicking menu item to load main page again, i create new copy of document, so my preloader has his class again and showed up. So, i decided to use AJAX and to not reload whole page by clicking menu item or logo. Now i use this:

     <script type="text/javascript">
        $(document).ready(function(){
             $("#blog, #logo").click(function(){
                 $("#container").load("/blog");
                 document.getElementById("preloader").className = 'test';
             });
        });
    </script>

So, when i click logo or menu item i load my category called «blog» in container. And my side bar looks like this:

...        
<a href="javascript:;" id="logo"><i class="logo"></i></a>
...
<li class="m_blog"><a id="blog" href="javascript:;"><i class="icon"></i>Blog</a></li>
...

So, it works! Preloader appear only when you open site through domain name. But 1 problem appear. When i open category «video» i have adress like this: mysite.com/video/

And when i came back to main page through logo or menu i have same adress! Because content loading without reload whole page and adress doesn't change. How i can fix it? Help me, please! I just want to show my preloader only once: when i came through domain name or refresh main page by F5. I already feel dizzy, because i only know HTML and CSS, but today start to learn AJAX and jQuery. Help me in this matter.

Answer 1

So, i have resolved problem on my own. But, anyway, thanks to @prabeen-giri who have helped me thinking in right way. Firstly, I need to explain preloaders mechanism. Just look at CSS:

position: fixed;
display: block;
top: 0;    /* making preloader cover all screen */
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position:center; center;
background-size: auto auto;
background-image: url(../images/preload.png); /* your picture should be here */
background-color:#000; 
z-index:99; /* must be the highest number of all others to cover them all */

So, your preloader just a picture or something else which cover all window and smoothly disappear (by jQuery) when whole content is loaded.

<div id="preloader" class="preloader"></div>

And here is script:

<script type="text/javascript">  
     $(window).load(function() {
          $("#preloader").delay(700).fadeOut("slow");}); 
</script>

To resolve my problem and show preloader only once when entering site through domain name we need to use cookies. There are 2 cookie helper function (from Quirksmode):

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

So, we need to enter our own cookie to create the conditions for running the script. Initially our created cookie equals null and this equality will be condition to running the script. After that we set cookie some value to not start jQuery again. Here's code:

<script type="text/javascript">  
    $(window).load(function() {
        if (readCookie('referer') == null){
            $("#preloader").delay(700).fadeOut("slow");}
        createCookie('referer',1,0);
     }); 
</script>

But how to remove our preloader picture and background after refreshing the page? Because we just disable jQuery fadeOut proccess by our conditions. Picture and black background keep covering our window and not going to fade away...

Let's create new condition and place it in

<script>
    if (readCookie('referer') == null) {
        document.write("<style>.preloader {background-image: url(../images/preload.png); background-color:#000; z-index:99;}</style>");
    }
</script>

By this we set our image, z-index and background to preloader class. Our cookie equals null only when user enter the site through domain name OR have cleared his cookie and refresh the page (which seems unlikely). And if cookie equals 1, as we set above, our preloader will show up but without picture and background, and our jQuery fadeOut will not run too! So, my problem resolved as I wanted, preloader will show up only once. Thanks again to @prabeen-giri!

Answer 2

Edit: Sorry I had to edit the whole thing

Here is the thing, you are sending the http request to the server on you every condition which essentially means that you hare reloading you DOM on initial state, on which you work afterwards using Javascript.

Using GET method would be much easier , but as you said you are just learning. You can use cookies instead ,

Here is the cookie helper functions

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
} 

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

Whenever you click the home/logo call

setCookie('referer','home',7), setCookie('referer','logo',7); 

Now,

 $(window).load(function() {
    if (getCookie('referer') != 'home' || getCookie('referer') != 'logo'){ 
     $("#preloader").delay(700).fadeOut("slow");
    } 

    setCookie('referer',null,7); 
 }); 

I think should work.