My preloader animation appears every time when i click anything

Question

My preloader animation appears every time when i click anything. I want it to appear for single time when entering the website or just for home page.

<div class="loader"><div style="width=150%; height=150%; background-color:white;" id="bodymovin"></div> </div>

I used jquery to delay the loading time to show the animation properly

<script type="text/javascript">
         setTimeout(function(){
        $('body').addClass('loaded');
                     $(".loader").fadeOut("slow");
    }, 5000);
</script>

I just want it to show once per session when enter into website or just for home page. I need help on this. Thank you.

Answer 1

use document.referrer and document.domain for discover first entry or no and add style="display:none;" for loader

<div class="loader" style="display:none;">
    <div style="width=150%; height=150%; background-color:white; border-style:solid;" id="bodymovin">
       My text for one show...
    </div>
</div>

<a href="">test link for self page(for not show loader)</a>

like this:

  var referrer =  document.referrer;
  var domain = document.domain;
  if(referrer.indexOf(domain)<0){  //if refer from curent domain. 
     $(".loader").show();          //show loader
     setTimeout(function(){
          $(".loader").fadeOut("slow");
     }, 5000);

  }