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.

Subconscious

I suggest using a cookie or session variable to indicate that you've already shown the preloader. Then, don't show the preloader if the session variable is already set. – Donia

@showdev, how i can do this without knowledge of JS? Can you help me with example? I will be grateful. – Subconscious

There is some information here regarding cookie manipulation using javascript and/or jquery: #1459224 – Donia

@showdev, seems not simple for me, because i don't know JS at all. Can you show an example with my code? – Subconscious

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!

Subconscious

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.

Fork

So, if I understand you right, i should set onClick event to my logo and menu a like this: <a href="/" id="logo" onClick="setCookie(preloader_counter,1,7)"><i class="logo"></i></a> But what i must do with my preloader script? How to combine yours code with mine? I understand that before start preloader script i must check my cookie, and if it > 1 - do not start preloader script. Am I thinking correct? – Subconscious

So, i set two functions in HEAD. Then set menu and logo <a> like this: <a href="/" id="logo" onClick="setCookie('referer','logo',7);"><i class="logo"></i></a> <li class="m_blog"><a id="blog" href="/" onClick="setCookie('referer','home',7);"><i class="icon"></i>Blog</a></li> And after two functioins set your modified preloader script. So, then i click logo or menu item - preloader appear again. May be we should use '#logo' insted of 'logo', because home and logo are ID's? – Subconscious

It does not matter, what you use , and it does not have to do anything with the IDS or class , we are using 'logo' and 'home' just as a key name . Now lets debug , check if cookie is being set or not , therefore can you alert (getCookie('referer')) on window.load() on every use cases they you mentioned above and see if the cookie is being set or not!! – Fork

So, i've cleared all my cookies and when I come through domain name alert shows me undefined, when through logo - shows me logo, when through menu - shows me home. So, cookies set correct, but now we need to change your algorithm of reading this cookies, right? – Subconscious

But somehow when i traveling around site and after that click logo or menu again - alert shows me null. Is it right? Because if its null I will see preloader, but I dont want. And if I randomly clicking menu items I get null or home. Something went wrong. :( May be helper functions isn't correct? – Subconscious