JSFiddle - React, Tailwind, and code Playground

HTML

<img data-img-src="http://www.lubasf.com/blog/wp-content/uploads/2009/03/gnome.jpg" style="display: none" />

<img data-img-src="http://buffered.io/uploads/2008/10/gnome.jpg" style="display: none" />

JavaScript

(function(jQuery) {
jQuery.fn.loadImages = function() { 
    var numToLoad = jQuery(this).length;
    var numLoaded = 0;
    jQuery(this).each(function() { 
        if(jQuery(this).attr('src') == undefined) {
            return jQuery(this).load(function() {
                numLoaded++;
                if(numToLoad == numLoaded)
                    return this; // attempt at making this plugin 
                                 // chainable, after all .load()
                                 // events have completed.
            }).attr('src', jQuery(this).attr('data-img-src'));
        } else {
            numLoaded++;
            if(numToLoad == numLoaded)
                return this; // attempt at making this plugin 
                             // chainable, after all .load()
                             // events have completed.
        }
    });
    // this works if uncommented, but returns before all .load() events have completed
    //return this;
};
})(jQuery);


// I want to chain a .fadeIn() after all images have completed loading
$('img[data-img-src]').loadImages().fadeIn();