JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<div id="test" rsrc="http://www.w3schools.com/jsref/w3javascript.gif,w3javascript1.gif,w3javascript2.gif,w3javascript3.gif,w3javascript4.gif,w3javascript5.gif,w3javascript6.gif,w3javascript7.gif,w3javascript8.gif,w3javascript9.gif,w3javascript10.gif,w3javascript11.gif,w3javascript12.gif,w3javascript13.gif,w3javascript14.gif,w3javascript15.gif,w3javascript16.gif,w3javascript17.gif,w3javascript18.gif,w3javascript19.gif,w3javascript20.gif,w3javascript21.gif,w3javascript22.gif">
    <img id="img1" src="http://www.w3schools.com/jsref/w3javascriptxxxxx.gif" width="100" height="132">
    <img id="img2" src="http://www.w3schools.com/jsref/w3javascriptyyyyy.gif" width="100" height="132">
</div>

JavaScript

function nextImg(img)
{
  if ($(img).parent()[0].getAttribute('rsrc') != '')
  {
    if (Boolean(window.chrome)) //if (('webkitRequestAnimationFrame' in window) || !!window.webkitURL)
    {
      img.setAttribute('src', null);
    }
    var arrImg = $(img).parent()[0].getAttribute('rsrc').split(',');
    var next = arrImg.pop();
    $(img).parent()[0].setAttribute('rsrc', arrImg.join(','));
    img.setAttribute('src', next);
  }
  else
  {
    img.setAttribute('onerror', '');
    img.setAttribute('src', '');
    alert('rsrc is empty!!! no valid images.');
  }
}
function checkImages()
{
    var images = $('#test img').get();
    var imgLoad = imagesLoaded(images);
    imgLoad.on('fail', function(instance)
    {
        var image = instance.images[0];
        if ($(image.img).parent()[0].getAttribute('rsrc'))
        {
            nextImg(image.img);
            checkImages();
        }
        else
        {
            //alert($(image.img).prop('id') + '\n\n' + image.img.src + '\n\n' + $(image.img).parent()[0].getAttribute('rsrc'));
            alert('instance.images[0].isLoaded=' + instance.images[0].isLoaded);
            alert('instance.images[1].isLoaded=' + instance.images[1].isLoaded);
            $.each(instance.images, function(index, image){
                if (!image.isLoaded)
                    $(image.img).remove();
            });
        }
    });
    /*imgLoad.on('progress', function(instance, image)
    {
        if (!image.isLoaded && $(image.img).parent()[0].getAttribute('rsrc'))
        {
            //alert($(image.img).parent()[0].getAttribute('rsrc'));
            //alert($(image.img).prop('id') + '\n\n' + image.img.src + '\n\n' + $(image.img).parent()[0].getAttribute('rsrc'));
            nextImg(image.img);
            checkImages();
        }
        else if (!image.isLoaded && !$(image.img).parent()[0].getAttribute('rsrc'))
        {
            //alert($(image.img).prop('id') + '\n\n' + image.img.src + '\n\n' +...