Buy me a coffee

Squarespace: Image Loading Screen

In this post, I will share custom code to create Image Loading Screen. Like below.

First, go to Settings > Advanced > Code Injection > Footer.

Next, insert these code (below image). Replace https:///… with your image

You can also use GIF image 😉

<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: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  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/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

If you want to use Logo, instead of Image, use these code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

Code by @rdreed – Squarespace Forum

14 thoughts on “Squarespace: Image Loading Screen”

  1. THIS IS AWESOME!!! THANK YOU!
    Is there a way to only have the loading screen apply only on the home page?

    Thanks,

    Adam

    Reply
  2. This is awesome, thank you! Do you know if there’s a way to keep the page from loading in prior to seeing the loading screen? What’s happening with my site is that you get a millisecond of the page (text and images) and then the loading screen takes over, so you get a weird flicker.

    Reply
  3. How can I make this appear better on mobile? My image looks great on desktop but how can I customise it to show the image at a smaller size or a different image on mobile?

    Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder