JSFiddle - React, Tailwind, and code Playground

by xmarcos

HTML

<p class="loading">Loading ... </p>
<div id="main">
</div>

CSS

img {
    width: 75px;
    height: 100px;
    margin: 5px;
}

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} 
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} 
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} 
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} 

.loading {
    font-family: arial;
    margin: 5px;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;

-moz-animation:blink normal 2s infinite ease-in-out; 
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out; 
}

JavaScript

(function () {

"use strict";
    
var nt = 4020179,
    rangeEnd =   4941575,
    folder =     "1",
    office =     "026",
    year =       "2010",
    urlPattern = "http://www.padron.gob.ar/fotos/$folder//FOTOS/F_0000$nt0$year$office.jpg",
    url = "",
    eMain = document.getElementById("main"),
    loadImg,
    nextImage;

urlPattern = urlPattern.replace("$folder", folder).replace("$office", office).replace("$year", year);
    
nextImage = function() {
    nt++;
    if (nt <= rangeEnd) {
        loadImg(url);
    }
}

loadImg = function() {
    var img = document.createElement("img");
    url = urlPattern.replace("$nt", nt.toString());
    img.addEventListener("load", function() {
        eMain.appendChild(img);
        nextImage();
    });
    img.addEventListener("error", nextImage);
    img.src = url;
}

loadImg();
    
}());