I recently created a full-screen, auto reloading app that pulls in images from an Unsplash.com collection. You can sit back and let the auto refresh do its thing every 10 seconds, change it to more or less time, or manually refresh the page to get a new photograph.

Take a look at the pen here.

Why did I do it? It's kind of simple, actually. I love photography.

The HTML and the CSS are pretty basic so I'll just talk about the Javascript (jQuery). This is all of the code it took for me to get what I wanted:

  // control the auto refresh rate -> 1000 = 1 second
var refreshRate = 10000; // 10 seconds


// Automatically reload the browser
setInterval(function() {
   window.location.reload();
}, refreshRate);


// Hide the images on load
$('.random-image').hide();

// Get a random image from Unsplash and fade it in on load
$('.random-image').css({
  // serves a random image from this collection on Unsplash.com
  'background-image' : 'url(https://source.unsplash.com/collection/142324/1600x900)'
}).fadeIn(1500);

The first thing I wanted to do was give someone (namely, me!) an easy way to change the amount of time before the auto refresh kicked in. So I created the time element of the setInterval() method to be a variable. Just change the variable to change the auto refresh timer.

  // control the auto refresh rate -> 1000 = 1 second
var refreshRate = 10000; // 10 seconds

Note that the time is counted in milliseconds. Therefore, 10,000 milliseconds equals 10 seconds.

The second part of the code is the function that automatically reloads the browser at a determined rate. I set up a setInterval() function to handle the timing:

  // Automatically reload the browser
setInterval(function() {
   window.location.reload();
}, refreshRate);

This takes window.location (the current URL) and adds the reload() method. That reload happens on the interval that we set in the refreshRate variable above.

Unsplash.com is a great site for free images to use for whatever you want. It's a site where professional photographers give free images to the world, basically. Unsplash also has set up an API that developers can use for their websites and apps. I'm using Unsplash Source, which is a lite version of the API. You can also check out the full documentation for the Unsplash API. Here is the code for pulling in the image from Unsplash and putting it into the random-image container:

  // Hide the images on load
$('.random-image').hide();

// Get a random image from Unsplash and fade it in on load
$('.random-image').css({
  // serves a random image from this collection on Unsplash.com
  'background-image' : 'url(https://source.unsplash.com/collection/142324/1600x900)'
}).fadeIn(1500);

On page load, we run this function that first hides the image container then pulls an image from Unsplash and inserts it as the background image in the random-image div. I also added a fade in through jQuery that gives the image a nice fade effect. That's purely aesthetic and could be removed. If you take out the fade, you can also take out the hide function that is before it. These two pieces of code work in tandem.

One note on the fade in: I found that because I'm loading a large image into the browser it can take a lot of time and the fade sometimes wasn't seen. So I bumped that up to 1.5 seconds, which is a little long, but gives the image time to load and still fade in. In the future, if I could pull in the collection through an AJAX call, I could then cycle through the images in the JSON and have them preloaded and ready to insert into the container. I would then bring this fade in time down to 500 or so.

So this is all pretty basic, but the effect is nice. Sometimes users just want a nice app that doesn't make them think, it makes them dream. I also hope it opens the eyes of others to a huge, beautiful world of adventure that's just waiting for them.

Leave comments or questions below!

Edit: I recently used Codepen Projects to create a full web app using this same technique. The app allows you to explore great cities of the world using the same full-screen background. Check it out here:

Explore the Great Cities of the World


3,857 6 44