JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>

JavaScript

(function() {
    // hook up a dummy animation that completes when the image finishes loading
    // If you call this before doing an animation, then animations will
    // wait for the image to load before starting
    // This does nothing for elements in the collection that are not images
    // It can be called multiple times with no additional side effects
    var waitingKey = "_waitingForLoad";
    var doneEvents = "load.waitingForLoad error.waitingForLoad abort.waitingForLoad";
    jQuery.fn.waitForLoad = function(fn) {
        return this.each(function() {
            var self = $(this);
            if (this.tagName && this.tagName.toUpperCase() === "IMG" && 
              !this.complete && !self.data(waitingKey)) {
                self.queue(function(next) {
                    // nothing to do here as this is just a sentinel that 
                    // triggers the start of the fx queue
                    // it will get called immediately and will put the queue "inprogress"
                }).on(doneEvents, function() {
                    // remove flag that we're waiting,
                    // remove event handlers
                    // and finish the pseudo animation
                    if (fn) {fn.call(this);}
                    self.removeData(waitingKey).off(doneEvents).dequeue();
                }).data(waitingKey, true);
            }
        });
    };

    // replace existing promise function with one that
    // starts a pseudo-animation for any image that is in the process of loading
    // so the .promise() method will work for loading images
    var oldPromise = jQuery.fn.promise;
    jQuery.fn.promise = function() {
        this.waitForLoad();
        return oldPromise.apply(this, arguments);
    };
})();


var imagesURLArray = [
    'http://placekitten.com/200/300',
    'http://placekitten.com/100/100',
    'http://placekitten.com/400/200'];

var images = $();
$.each(imagesURLArray, function(index, value) {
    images =...