Can I "randomize" a set of loading screens?

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>

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

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

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

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

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

2nd place

Hi Ba, thanks again!
I tried your code and it works good! (I just had to remove the opacity: 0, as it initially showed the homescreen "under" the loading screen). 
I hope that apart from solving issues of I-don't-know-how-many-squarespace-users, you also have time for eating and sleeping! 😄