JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div>
    <img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/ajax-loader.gif" id="load_0" />
    <img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/ajax-loader.gif" id="load_1" />
    <img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/ajax-loader.gif" id="load_2" />
    <img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/ajax-loader.gif" id="load_3" />
</div>
<script>
    var i = 0;
    arr = ['http://192.168.34.53/iPad/R&D/nagendra_akula/040612/image1.jpg','http://192.168.34.53/iPad/R&D/nagendra_akula/040612/image2.jpg','http://192.168.34.53/iPad/R&D/nagendra_akula/040612/image3.jpg','http://192.168.34.53/iPad/R&D/nagendra_akula/040612/image4.jpg'];
x = setInterval(function(){
    var img = new Image();
    img.src = arr[i];
    img.height = "30";
    img.width = "30";
    document.getElementById("load_"+i).src = img.src;
    i++;
    if(i==4){
        clearInterval(x);
    }
},2000);
</script>

CSS

img{
    vertical-align:middle;
    height:30px;
    width:30px;
}