Displaying a loading gif for 5 seconds automatically

Just remove the onclick="show()", and add show(); as the last line of your JavaScript block.

Also, as I'm sensitive to global namespace pollution, I'd do it like this:

<script type="text/javascript">

  (function(){
    var myDiv = document.getElementById("myDiv"),

      show = function(){
        myDiv.style.display = "block";
        setTimeout(hide, 5000); // 5 seconds
      },

      hide = function(){
        myDiv.style.display = "none";
      };

    show();
  })();

</script>

You can just remove the display: none; from myDiv. That way it will be visible from the beginning, and then you hide it after five seconds.

There is no need to first hide it with CSS, and then display it with JavaScript, when you want it to show up from the beginning.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br>
<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br>

<script type = "text/javascript">   
setTimeout(function(){
   document.getElementById("myDiv").style.display="none";
}, 5000);  
</script>