HELP needed with my loading animation GIF. I want it to load only once per session

Site URL: https://shilohdobiedesign.squarespace.com

Help!! I've been using some code from @tuanphan to create a loading animation gif when someone enters my site. I've been using my own GIF to load before people get to the home page. It's loading on every new page and when I go back to the home page. 

Ideally, I would like the loading animation gif to appear only once per viewing session. 

If anyone can help with the code that would be so appreciated.

shilohdobiedesign.squarespace.com
password: sddesign

Code I'm using currently: 

<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: #000;
  /* SET BACKGROUND SIZE */
  background-size: 900px;
  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/615511949ed8082b26e26898/t/61627c55e182b11f3f0eab7e/1633844315598/SD2.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(1900).fadeOut(1800);
})
</script>

@bangank36 is this possibly something you can help with?? Thank you!

31 minutes ago, HumDes94 said:

@bangank36 is this possibly something you can help with?? Thank you!

I think you can use session storage to save state of gif files and take advantahe of some js library such as libgif to control the gif playback, one issue to overcome is since the images are served from squarespace cdn, the domain may different from your site and may cause cross-origin issue since most gif playback is based on html5 canvas

@HumDes94 It look like you managed to get this working on your site? Are you able to give me some pointers as I'm trying to achieve the same thing