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>