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>
<table border="0" cellspacing="10" cellpadding="10">
    <tr>
        <td valign="middle" align="center" width="100" height="100">
            <img style="display:none" class="productImage" src="http://placekitten.com/900/900" border="0" alt="" width="100" height="100" />
            <img class="loadingAnimation" src="http://www.phpdevblog.eu/examples/imagesloaded/loading-animation.gif" border="0" alt="" />
        </td>
        <td>Picture 1</td>
    </tr>
    <tr>
        <td valign="middle" align="center" width="100" height="100">
            <img style="display:none" class="productImage" src="http://placekitten.com/400/400" border="0" alt="" width="100" height="100" />
            <img class="loadingAnimation" src="http://www.phpdevblog.eu/examples/imagesloaded/loading-animation.gif" border="0" alt="" />
        </td>
        <td>Picture 2</td>
    </tr>
    <tr>
        <td valign="middle" align="center" width="100" height="100">
            <img style="display:none" class="productImage" src="http://placekitten.com/400/400" border="0" alt="" width="100" height="100" />
            <img class="loadingAnimation" src="http://www.phpdevblog.eu/examples/imagesloaded/loading-animation.gif" border="0" alt="" />
        </td>
        <td>Picture 3</td>
    </tr>
    <tr>
        <td valign="middle" align="center" width="100" height="100">
            <img style="display:none" class="productImage" src="http://placekitten.com/400/400" border="0" alt="" width="100" height="100" />
            <img class="loadingAnimation" src="http://www.phpdevblog.eu/examples/imagesloaded/loading-animation.gif" border="0" alt="" />
        </td>
        <td>Picture 4</td>
    </tr>
</table>

CSS

/*
RESETS ------------------------
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:;
    background: transparent;
}
/*
RESETS END --------------------
*/

JavaScript

$(document).ready(function () {
    setTimeout(function () {
        $("img.productImage").each(function () {
            $(this).imagesLoaded(function () {
                $("img.loadingAnimation", $(this).parent()).hide();
                $(this).fadeIn(500);
            });
        });
    }, 1000);
});