Visiting the main page generates a new URL (so you can save it or share it) with a quote and a background. The “New quote” link actually takes you back to the main page, which in turn generates a new URL and so on. Reloading the page changes the background image. This adds a little bit of a serendipity as you can share a page with a quote and every visitor will see a different background. Pretty neat.
I’m also using a little CSS hack/trick to handle image preloading. My implementation is a bit more clean: I added empty paragraphs right before the end of body. I’m using an
@media rule to only load the background images for larger screens (to avoid preloading on mobile). Furthermore, I am reading the user agent string on the back end to hide those empty paragraphs so that they don’t even show up when you’re visiting the site on a phone.
There is a small “feminist twist”: a vast majority of the quotes are by women. (The quotes are not necessarily feminist themselves though.) If anyone has any suggestions for more good quotes that would go with the mood of the site, let me know.