JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loader" class="loading"></div>

CSS

DIV#loader {
    border: 1px solid #ccc;
    width: 640px;
    height: 480px;
}
/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
 DIV#loader.loading {
    background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center center;
}

JavaScript

function showImageFromWebcam() {
    var now = new Date();
    var stamp = parseInt(now.getTime() / 2000, 10);

    var img = new Image();

    // wrap our new image in jQuery, then:
    $(img)
    // once the image has loaded, execute this code
    .load(function () {
        // set the image hidden by default    
        $(this).hide();

        // with the holding div #loader, apply:
        $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .empty().append(this);

        // fade our image in to create a nice effect
        //$(this).fadeIn(200);
        $(this).show();
        setTimeout(showImageFromWebcam, 2000);
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
        // notify the user that the image could not be loaded
        setTimeout(showImageFromWebcam, 1333);
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', "http://clubwindsurf.info/ftpfiles/cam_1.jpg?" + stamp);
}

setTimeout(showImageFromWebcam, 2000);