How to show pre-page loader only once when entering through a domain name?

Question

So, I have a jQuery page preloader on the main page, for example:

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

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

This shows 4 times:

• When I enter a site through a domain name;
• When I refresh the homepage on F5;
• When I click on the logo (I have to go to the main page when I clicked on it);
• When I click the "Home" menu item. But I want to show it only the first two times. So, the first idea that came to my mind was to remove the div class so as not to show the preload image throughout the page when I click on the JS logo or menu item. And used this:

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

But then ... I realized that by clicking the menu item to load the main page again, I am creating a new copy of the document, so my preloader again has its own class and appeared. So, I decided to use AJAX and not reload the whole page by clicking a 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 a logo or menu item, I load my category called “blog” into the container. And my sidebar 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 appears only when you open a site through a domain name. But there is one problem. When I open the video category, I have the address: mysite.com/video/

And when I returned to the main page through a logo or menu, I have the same address! Since downloading content without reloading the entire page and address does not change. How can i fix this? Help me please! I just want to show my preloader only once: when I came through a domain name or updated the main page by F5. I am already dizzy because I only know HTML and CSS, but today I am starting to learn AJAX and jQuery. Help me in this matter.

Answer 1

So, I solved the problem myself. But, anyway, thanks to @ prabeen-giri, who helped me think correctly. First, I need to explain the preloader mechanism. Just look at the 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 is just an image or something else that spans all windows and fades out smoothly (by jQuery) when all the content is loaded.

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

And here is the script:

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

To solve my problem and show the preloader only once when entering the site through a domain name, we need to use cookies. There are 2 helper cookie functions (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 in order to create conditions for the script to run. Initially, our created cookie is null , and this equality will be a condition for running the script. After that, we set the cookie to some value so as not to start jQuery again. Here is the 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 preview and background after page refresh? Because we just turned off jQuery fadeOut proccess by our conditions. The picture and the black background save our window and do not disappear ...

Create a new condition and put 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> 

Under this we set our image, z-index and background to the preloader class. Our cookie is null only when the user enters the site through the domain name OR cleared his cookie and refreshed the page (which seems unlikely). And if the cookie is 1 , as we set above, our preloader will appear, but without a picture and background, and our jQuery fadeOut will not start either! So, my problem is solved the way I wanted, the preloader will appear only once. Thanks again @ prabeen-giri!

Answer 2

Edit: Sorry, I had to edit all this

This is what you send an HTTP request to the server for each condition, which essentially means that you declare that you restart the DOM in the initial state, after which you work with Javascript.

Using the GET method would be much simpler, but as you said, you are just learning. Instead, you can use cookies,

Here are 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 press 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 it should work.