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
THIS IS AWESOME!!! THANK YOU!
Is there a way to only have the loading screen apply only on the home page?
Thanks,
Adam
You can add all code to Homepage settings > Advanced > Header
Thankyou for this!!
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.
Replied to your email!
This is awesome! Thank you so much!!
I have the same problem that my page appears for a second before the loading page shows out. Would it be possible for me to get some additional help with this too?
Hi. Have you solved it yet?
I’m having the same issue with my site! Is there a solution to this? Thank you so much in advance.
Can you do this with only custom CSS? I don’t have access to the advanced settings.
Hi. There is no way with Personal Plan.
Is there a way to make this go away upon scroll rather than a timer?
Hi. Sent to your email.
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?
Hi. Can you share link to your site?
use this form
I rarely check comment on blog.https://beaverhero.com/covid19