CherryTree Posted July 12, 2021 Share Posted July 12, 2021 (edited) 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! Edited July 12, 2021 by CherryTree Beyondspace 1 Link to comment
CherryTree Posted July 13, 2021 Author Share Posted July 13, 2021 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? djshiflet 1 Link to comment
CherryTree Posted July 13, 2021 Author Share Posted July 13, 2021 Also, is there a way to exclude a particular page? I'd like to run a specific, static loading screen on the home page. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment