JSFiddle - React, Tailwind, and code Playground

by Marcus Ekwall

HTML

<img src="http://3.bp.blogspot.com/_u4ZUPrg_e2A/TMh80JNh9UI/AAAAAAAAABo/34Ih7IhucE0/s1600/hello-kitty-cat-clothing-01.jpg" alt="" />

<img class="hidden" data-src="http://3.bp.blogspot.com/_u4ZUPrg_e2A/TMh80JNh9UI/AAAAAAAAABo/34Ih7IhucE0/s1600/hello-kitty-cat-clothing-01.jpg" alt="" />

CSS

img.hidden { display: none; }

JavaScript

(function($){
    $.fn.reveal = function(){
        var args = Array.prototype.slice.call(arguments);
        return this.each(function(){
            var img = $(this),
                src = img.data("src");
            src && img.attr("src", src).load(function(){
                img[args[0]||"show"].apply(img, args.splice(1));
            });
        });
    }
})(jQuery);


$(function(){
    $("img.hidden").reveal("fadeIn", 1000);
});