Jump to content

Can I "randomize" a set of loading screens?

Recommended Posts

Site URL: https://www.marekslavicky.com/

Dear Squarespace team,
On my homepage, I have set up a loading screen, which is a little "quote" with a small image.
Is there a way to shuffle between a set of different loading screens whenever I enter/reload the homepage? 
FYI to set up the loading screen, I currently use the code below injected to my homepage.
Many thanks!
Marek

<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: 500px;
  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/5f42e4f33f99c90278dc426c/t/5fa74c5264a757513adecce9/1604799570623/loading-page-argo-en.png);
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(750).fadeOut("slow");
})
</script>

<span id="top"></span>

Link to comment

Please try this method

Paste this in header

<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #000;
  /* SET BACKGROUND SIZE */
  background-size: 500px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<span id="top"></span>

Paste this in footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
  
 $(document).ready(function() {
     var arr = [
        "https://static1.squarespace.com/static/5f42e4f33f99c90278dc426c/t/5fa74c5264a757513adecce9/1604799570623/loading-page-argo-en.png",
        "https://i.picsum.photos/id/891/200/300.jpg?hmac=lIgvXCbqdV9jucIDyPg0xpJl0QcTJTVuI9oo25NZqBM",
        "https://i.picsum.photos/id/824/200/300.jpg?hmac=CPaWVapi5aRxRDN0wSZfBeD_w8iiddSi1zhfyLj7AnA",
        "https://i.picsum.photos/id/621/200/300.jpg?hmac=GgxwZqdPsVQwlM2QhfHoLU8gZ7uo_PP6oD4KmIq-ino",
    ]; 

    document.querySelector(".logoload").style.backgroundImage = "url('"+arr[Math.floor(Math.random() * arr.length)]+"')";
});
  
$(window).load(function() {
    $(".logoload").delay(750).fadeOut("slow");
})
</script>

You can add as many as different url in arr[], every new line

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thanks Ba, it works great! I have two questions though:
1) Since I have a bilingual website, I would like to have a different set of loading screens for English and Czech version. That's why I was putting the code into the homepage directly.  Could you help in adjusting this code?
2) Is it possible to do a fade in effect, too?

Thanks again!
Marek

Link to comment
2 minutes ago, MarekS said:

Thanks Ba, it works great! I have two questions though:
1) Since I have a bilingual website, I would like to have a different set of loading screens for English and Czech version. That's why I was putting the code into the homepage directly.  Could you help in adjusting this code?
2) Is it possible to do a fade in effect, too?

Thanks again!
Marek

You can place them directly in each page code injection, let me know if it helps

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 minutes ago, MarekS said:

It worked like a charm, Ba! Thanks!
Also for the fade-in effect for the loading screen, do you think it is possible?

Please add new lines accordingly, sorry I dont have time to test properly

image.png.cddbddb40bac14795af2163b522c7d86.png

 

2nd place

image.thumb.png.8052a4ffb99c9f7ce316113185bf2e81.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.