Image Loading Screen

Site URL: http://www.saladishy.squarespace.com

Hi Guys!

@tuanphan I found your code online for loading page image which is working great - THANK YOU!

Is there anyway I can have it so that the screen is black at first, the logo fades in, and then fades out as currently is?

Appreciate any help.

Thanks

This code also seems to be using the loading screen on every page.

I only want it to show up when customers first come to the website on the home page; is this possible please?

CODE IN USE:

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #000000;
  /* SET BACKGROUND SIZE */
  background-size: 300px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/6156ea185058352451e13c7b/t/61672c1b40cdc577d7e3951f/1634151451330/whiteSaladishy.png");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(2000) .fadeOut(2000);
})
</script>