Fade in images after loading with preloader icon?

I have thumbnail grid build and i would like to achieve a fade in of the images after they have been loaded with a image placeholder and preloader on top. I have a example from a website that uses the same principal of loading the images:

--> See website example

--> Here my Fiddle

This is my thumbnail grid stucture:

<div class="grid-wrapper">

    <div class="grid-group compact-group">

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://ift.tt/1IJLvb0">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://ift.tt/1IDDFLB">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://ift.tt/1IJLtzK">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://ift.tt/1IJLtzM">
                <div class="caption">Project untitled</div>
            </a>
        </div>

    </div>
    <!-- grid-group -->
</div>
<!-- grid-wrapper -->

via Chebli Mohamed