JSFiddle - React, Tailwind, and code Playground

by amantur

HTML

<div id="container"></div>

JavaScript

var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834',
    'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png',
    'http://1.bp.blogspot.com/-jiW5NeKtZBY/T-nyLRuSSZI/AAAAAAAACaA/Ro8wjmk32ow/s1600/red-number-8.jpg',
    'http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg',
    'http://us.123rf.com/400wm/400/400/zoomzoom/zoomzoom1102/zoomzoom110200070/8913747-4--created-by-light-colorful-digits-over-black-background.jpg',
    'https://twimg0-a.akamaihd.net/profile_images/1633986906/6digits-fist-Logo.png'],
    images = [imgArr.length],
    otherUrls = {}, urlTypes = {
        IFRAME: 0,
        LINK: 1
    };

//INITIALIZE OTHER URLS WITH URL AND INDEX AT WHICH IT WOULD BE LOADED
function createInfo(url, type, text) {
    var o = {};
    o.URL = url;
    o.Type = type;
    o.Text = text;
    return o;
}
otherUrls[2] = createInfo("http://http://en.wikipedia.org/wiki/Punjabi_language", urlTypes.IFRAME);
otherUrls[4] = createInfo("http://http://en.wikipedia.org/wiki/Numerical_digit", urlTypes.LINK, "click here [wikipedia]");

function loadImages(arr, loc, other) {
    var l = arr.length,
        i = 0,
        url, idx, o;
    while (arr.length) {
        url = arr.shift(),
        idx = (l - arr.length) - 1,
        o = other[idx];

        makeImage(url, idx, loc, o);
    }
}

function makeImage(url, idx, loc, other) {
    var image = new Image();
    image.src = url;
    images[idx] = image;
    image.onload = function () {
        imageLoaded(idx, loc, other);
    };
    image.onerror = function () {
        var ix = idx,
            ot = other,
            lc = loc;
        imageError(ix, lc, ot);
    };
}

function imageLoaded(i, l, o) {
    var img = $(images[i]);
    img.hide().css({
        'display': 'block',
        'height': '25px',
        'width': '25px'
    }).appendTo(l).fadeIn();
   ...