Can I limit my preloading screen to appear only during specific actions?

[ddai]

I have coding for a preloading screen that shows up every time something is clicked on the site. Is it possible to have it where it only shows when either 1) a link in the hamburger menu is clicked, or 2) only when first coming to home page on site & when the home button / logo is clicked. This is the code I currently have running. My site link is ysamani.com.

<div id="splash">
    <div id="splash_logo">
      <img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
    </div>
</div>

<style>
      #splash {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background:#EDEDED;
        text-align:center;
        color:#EDEDED;
      }
      #splash_logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #splash_logo img {
        width:300px;
      }
      .fadeUp{
        animation-name: fadeUpAnime;
        animation-duration:0.5s;
        animation-fill-mode:forwards;
        opacity: 0;
      }
      @keyframes fadeUpAnime{
        from {
          opacity: 0;
        transform: translateY(100px);
        }
      
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }    
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

 <script>
      $(window).on('load',function(){
        $("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒（750ms）待機してからフェードアウト
        $("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト
      });
 </script>

Thanks for any help and insight given. 

[EBOOST]

Hi @ddai 

Would you like to show loading on homepage? Don't need show other pages?

[ddai]

Correct!

[EBOOST]

Hi,

Maybe I suggest code below:

{% if template == 'index' %}
    <div id="splash">
	    <div id="splash_logo">
	      <img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
	    </div>
	</div>

	<style>
	      #splash {
	        position: fixed;
	        width: 100%;
	        height: 100%;
	        z-index: 999;
	        background:#EDEDED;
	        text-align:center;
	        color:#EDEDED;
	      }
	      #splash_logo {
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);
	      }
	      #splash_logo img {
	        width:300px;
	      }
	      .fadeUp{
	        animation-name: fadeUpAnime;
	        animation-duration:0.5s;
	        animation-fill-mode:forwards;
	        opacity: 0;
	      }
	      @keyframes fadeUpAnime{
	        from {
	          opacity: 0;
	        transform: translateY(100px);
	        }
	      
	        to {
	          opacity: 1;
	        transform: translateY(0);
	        }
	      }    
	</style>

	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

	<script>
	  $(window).on('load',function(){
	    $("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒（750ms）待機してからフェードアウト
	    $("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト
	  });
	</script>
{%  endif  %}

[ddai]

That works!! Sorry to bother, is it possible to have this preload screen when clicking any button in the hamburger menu as well as when you click the cart button?

[EBOOST]

Hi @ddai 

You can use code below:

{% if template == 'index' or  template contains 'collection' or template contains 'blog' or template contains 'page' or template contains 'article' or template contains 'cart' %}
    <div id="splash">
	    <div id="splash_logo">
	      <img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
	    </div>
	</div>

	<style>
	      #splash {
	        position: fixed;
	        width: 100%;
	        height: 100%;
	        z-index: 999;
	        background:#EDEDED;
	        text-align:center;
	        color:#EDEDED;
	      }
	      #splash_logo {
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);
	      }
	      #splash_logo img {
	        width:300px;
	      }
	      .fadeUp{
	        animation-name: fadeUpAnime;
	        animation-duration:0.5s;
	        animation-fill-mode:forwards;
	        opacity: 0;
	      }
	      @keyframes fadeUpAnime{
	        from {
	          opacity: 0;
	        transform: translateY(100px);
	        }
	      
	        to {
	          opacity: 1;
	        transform: translateY(0);
	        }
	      }    
	</style>

	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

	<script>
	  $(window).on('load',function(){
	    $("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒（750ms）待機してからフェードアウト
	    $("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト
	  });
	</script>
{%  endif  %}

[ddai]

I applied your coding and I am getting this. Also, it is the same as before, where the popup only shows when going to homepage. Am I to replace my whole code with your whole code? As that is what I did.

[takeoverapparel]

Hey I was wondering if you ever got this fixed and where did you place the code? Im trying to set up a preloader the one I had wasn't showing on mobile