Start by loading the "spinner" image first. Once the gallery images have finished asynchronously loading, swap out the spinner with the newly loaded images.

My preferred method is to provide a reference link instead of duplicating code, and here is an example from CSS tricks.

If you want to hide an image and then switch it in when it loads, you can achieve this by placing a spinner behind the image and using some CSS trickery. Wrap the image in a div element where you define your spinner, then use CSS to hide the image. Trigger a function on the image's onload event to fade the image in once it has loaded.

Here is a simple example of how to accomplish this:

http://jsfiddle.net/4a1wj359/1/

// Function to display the image when it loads
var loaded = function(img){
   img.classList.add('loaded');
};

  <div class="img_wrapper">
    <img id="image1" src="http://theselby.com/media/2_28_11_SupremeCoffee7598.jpg" alt="" onload="loaded(this)"/>
 </div>

Check out the fiddle for the complete CSS code. In my example, I use a black box as the background instead of a spinner. You can replace the black box with your own spinner image. Additionally, I add a fading effect to the image once it finishes loading, but you can customize this according to your preferences.