title: Load different images on page refresh
body: <p>I have this small script in my HTML file:</p>
  
  <pre><code>$(document).ready(function() {
  
      var rand = Math.floor((Math.random()*3)+1) //random number between 1 and 3
  
      $("body").css({ "background": "url(image" + rand + ".jpg)",
                      "background-size": "100% 100%",
                      "background-repeat": "no-repeat"
                   });
  });
  </code></pre>
  
  <p>The idea is that on the server side I'm hosting 3 images image1.jpg, image2.jpg and image3.jpg. On page load, a random number between 1 and 3 is generated on the client side according to which the background image is displayed.</p>
  
  <p><strong>Is there a more efficient way to do this?</strong></p>
  
  <p>PS - The scenario is kind of similar to the GitHub Notifications page. Given that you've read all notifications, each time you refresh the page a different flavor of the octocat greets you :)</p>