JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

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

CSS

#log {
    height: 150px;
}

JavaScript

var url = "http://photos.smugmug.com/photos/i-vtH87Mv/0/S/JF2_3827-S.jpg";
// make a random URL to avoid image caching
function getRandURL() {
    return url + "?rand=" + Math.random();
}

// utility function for logging with timing
var start = new Date().getTime();
function logTime(msg) {
    var elapsed = new Date().getTime() - start;
    log(msg + ": " + elapsed/1000);
}

// direct logging to the #log div
log.id = "log";
logTime("images requested at time");

(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);
                    }
                    logTime("image loaded");                    
                    self.removeData(waitingKey).off(doneEvents).dequeue();
                }).data(waitingKey, true);
            }
        });
    };

    // replace...