JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head><title>Image Verify</title></head>
    <body>
        <img src='http://www.gravatar.com/avatar/552ed0e8f21fe5a130dd82532e5576bf?s=32&d=identicon&r=PG' alt="Andrew's gravatar">
        <img src='http://www.gravatar.com/avatar/c5f38186f0685299836b415bd17a64e1?s=32&d=identicon&r=PG' alt="Praveen's gravatar">
        <img src='http://www.example.com/foo.png' alt='This one fails'>
        <img src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG' alt="T.J.'s gravatar">

CSS

body {
    font-family: sans-serif;
}
p {
    margin: 0px;
}

JavaScript

jQuery(function($) {
    var imgs, checker, index, start;
    
    imgs = $('img');
    if (imgs.length > 0) {
        checker = $("<img>").hide().appendTo(document.body);
        checker.load(imageLoaded).error(imageFailed);
        index = 0;
        display("Verifying");
        start = now();
        verify();
    }
    
    function now() {
        return +new Date();
    }
    
    function verify() {
        if (!imgs || index >= imgs.length) {
            display("Done verifying, total time = " + (now() - start) + "ms");
            return;
        }
        checker[0].src = imgs[index].src;
    }
    
    function imageLoaded() {
        display("Image " + index + " loaded successfully");
        ++index;
        verify();
    }
    
    function imageFailed() {
        display("Image " + index + " failed");
        ++index;
        verify();
    }
    
    function display(msg) {
        $("<p>" + now() + ": " + msg + "</p>").appendTo(document.body);
    }
});