加载预加载器图标后淡入图像？

Question

我有缩略图网格构建，我想在图像占位符和预加载器顶部加载后实现图像的淡入淡出。我有一个网站的例子，它使用相同的加载图像的原理（查看顶部的灰色背景和圆形加载器）：

--> See website example

--> Here my Fiddle（我试图根据自己的情况调整脚本）

这是我的缩略图网格结构：

<div class="grid-wrapper">

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

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://lorempixel.com/output/abstract-q-c-800-570-2.jpg">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://lorempixel.com/output/abstract-q-c-800-570-4.jpg">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://lorempixel.com/output/abstract-q-c-800-570-7.jpg">
                <div class="caption">Project untitled</div>
            </a>
        </div>

        <div class="grid-item size-xs compact-item">
            <a href="#">
                <img src="http://lorempixel.com/output/abstract-q-c-800-570-5.jpg">
                <div class="caption">Project untitled</div>
            </a>
        </div>

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