Squarespace: Image Loading Screen

In this post, we 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

Share this post:

If you have any questions, just fill in form below

Each FREE/PAID option will have different priorities.
If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Posted in