JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://www.liverpoolcraftbeerexpo.com/wp-content/themes/lcbe/js/jquery.imagesloaded.js"></script>
<div class="wrap">
    <img class="image" src="http://placekitten.com/900/900" />
    <div class="test" style="background-image: url('http://cow2014.sb-studio.co.uk/images/loading.gif')"></div>
</div>
<div class="wrap">
    <img class="image" src="http://placekitten.com/900/900" />
    <div class="test" style="background-image: url('http://cow2014.sb-studio.co.uk/images/loading.gif')"></div>
</div>

CSS

.wrap {
    position: relative;
    width: 100%;
    height: auto;
}
.wrap .image {
    position: relative;
    width: 100% !important;
    height: auto !important;
    z-index: 1;
    display: none;
}
.test {
    position: relative;
    width: 100%; height: auto;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto auto;
    z-index: 2;
}

JavaScript

$(document).ready(function () {

    var windowWidth = $(window).width();

    $('.test').css({
        'height': windowWidth
    });

    setTimeout(function () {
        $("img.image").each(function () {
            $(this).imagesLoaded(function () {
                $(this).siblings('.test').hide();
                $(this).fadeIn(500);
            });
        });
    }, 1000);
});