Jump to content

Random section background image on each visit/refresh

Recommended Posts

Hi all,

I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total.

I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it.

Any suggestions that might iron out the bugs here would be appreciated.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 5/15/2022 at 3:07 PM, tuanphan said:

Hi,

We can achieve this with Gallery. Do you still need help on this?

Hi tuanphan,

Yes still looking for a suitable solution here.

Ideally I was hoping to achieve this using background images as I have a bit of content to go over top of the imagery. A gallery may be a workable option though if I cant get background images to work - how do you go about achieving random load of gallery images? (I don't want users to be able to scroll through other images either).

Thanks,
Aaron

Link to comment
  • 9 months later...
On 5/12/2022 at 7:52 AM, aaron1 said:

Hi all,

I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total.

 

I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it.

Any suggestions that might iron out the bugs here would be appreciated.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>

The code you provided looks like it should work for randomly loading a background image on refresh, but it's possible that the issue you're experiencing is related to caching. The browser may be caching the previous image and not updating it with the new one. One way to prevent caching is to add a query parameter to the image URL. This will make the browser think that the image is a new resource and force it to reload the image. Here's an updated version of the code that includes a query parameter:

document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
  ].sort(() => .5 - Math.random());
  
  var randImage = images[0];
  var imgEl = document.querySelector(".homepage article.sections section:first-child .section-background img");
  
  imgEl.src = randImage + '?v=' + Math.random(); // add a query parameter to prevent caching
  imgEl.setAttribute("srcset", "");
});

 

Link to comment
  • 2 months later...

I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page?

Link to comment
On 4/27/2023 at 12:06 AM, Lkrohnmiller said:

I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page?

Code Injection > Footer

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.