Making a randomized loading page

Site URL: http://www.cherrytreeinteriordesign.com

Hi! I'm trying to make loading pages that will load a random image each time. The code I have so far is code I pulled from elsewhere (here) and tweaked - see below:

<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: #E6E4E8;
  /* 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/5eebcfe57f948c024906fe27/t/60ebd829c22c005c9356a5d4/1626069033592/home-page-loading-screen.jpg/");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

That code does work for a single image, but I don't know how to modify it to do what I want. I'd like the background image to randomize to be one of several images I have. Any ideas how I do this? Please be gentle - I am below newbie status when it comes to coding, so explain like I don't know anything (because I don't).

Thanks in advance!

Okay, so after searching for the 50th time, I somehow stumbled across this Q&A that I hadn't seen before. So tweaking that, I got:

Header:

<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #E6E4E8;
  /* SET BACKGROUND SIZE */
  background-size: 1000px;
  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>

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/5eebcfe57f948c024906fe27/t/60ebe7c90a287971afb84858/1626073033610/LP+quote+1.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ccaa30721e650da8c5/1626073036294/LP+quote+2.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d2f229ba2ea8557b8e/1626073042282/LP+quote+3.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d4dc37083541d6b11d/1626073044510/LP+quote+4.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d6c22c005c93572b3a/1626073046893/LP+quote+5.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d9aa30721e650da8da/1626073049297/LP+quote+6.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7db320dbd0de29ebff0/1626073051316/LP+quote+7.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7dd66be7e490f2e65a8/1626073053378/LP+quote+8.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e0787dde1a90cc9e70/1626073056313/LP+quote+9.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e419a9f87deb91cefd/1626073060561/LP+quote+10.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e7566ded7d61cab84d/1626073063392/LP+quote+11.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ea2f3c4128e1a8c7e1/1626073066224/LP+quote+12.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7edf4fe78435a5864d4/1626073069328/LP+quote+13.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f0f4fe78435a5864d5/1626073072035/LP+quote+14.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f22f3c4128e1a8c7ef/1626073074813/LP+quote+15.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f52c5c2f6215e738b9/1626073077525/LP+quote+16.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f892abcc18c414639a/1626073080218/LP+quote+17.png",
    ]; 

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

It works! Except, it doesn't look right on mobile, and I want to disable it for mobile. That brings me to the question I asked here: is there a way to disable that javascript code for mobile devices?

Also, is there a way to exclude a particular page? I'd like to run a specific, static loading screen on the home page.