Jump to content

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

Recommended Posts

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.

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>
.logoload {
  background-color: #000;
  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");
<script type="text/javascript">
$(window).load(function() {


Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.