simple-Async iterator

Using simple-async AsyncIterator to load images sequentially

by Aravind Baskaran

HTML

<body onload="onLoad()">
    <header>
         <h3>AsyncIterator example</h3>
 <a href="http://aravindbaskaran.github.io/simple-async/">Github page</a>

         <h2>Darth vader makes such a good dad</h2>

         <h4>Images Courtesy <a href="http://imgur.com/gallery/bmpVg">imgur</a></h4>

    </header>
    <div id="main" role="main">
        <div id="msg"></div>
        <div id="board"></div>
    </div>
</body>

CSS

body {
    max-width: 500px;
    margin: 20px auto;
}
img {
    max-width: 500px;
    display: block;
    margin: 10px auto;
    border: 1px solid #DDD;
    min-height: 50px;
    -webkit-transition: opacity 500ms ease;
    -webkit-transition-delay: 200ms;
}
.loading {
    opacity: 0;
}
.done {
    opacity: 1;
}
#msg{
   text-align: center;
}

JavaScript

function createElem(htmlStr) {
    var fragment = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        fragment.appendChild(temp.firstChild);
    }
    return fragment;
}

function onLoad() {
    // array of images
    var images = ["http://i.imgur.com/G368h9n.jpg",
        "http://i.imgur.com/vCFTB2S.jpg",
        "http://i.imgur.com/Kjc0qrM.jpg", "http://i.imgur.com/2m6KfBv.jpg",
        "http://i.imgur.com/7adqDoC.jpg", "http://i.imgur.com/OR0Rr5c.jpg",
        "http://i.imgur.com/pvz4WnO.jpg", "http://i.imgur.com/mnTcyNz.jpg",
        "http://i.imgur.com/6yPgGqV.jpg", "http://i.imgur.com/1KjZ9Sa.jpg"];
    var msgEl = document.getElementById("msg");
    var boardEl = document.getElementById("board");
    var imgTemplate = "<img class='loading'/>";
    var imageObj;

    function start(itr) {
        console.log("Starting...");
        console.time("Total load time");
        msgEl.innerHTML = "Loading...";
        imageObj = new Image();
    }

    function end(itr) {
        msgEl.innerHTML = "The transformation is complete! ;)";
        console.log("Ending");
        console.timeEnd("Total load time");
        // destroy image loading object
        delete imageObj;
    }
    // magic stepper function
    function step(itr) {
        // Get current item in array
        var current = itr.current();
        console.log("Loading - " + current);
        console.time("Load time " + itr.currentIndex);
        var imgFrag = createElem(imgTemplate);
        var imgElem = imgFrag.children[0];
        boardEl.appendChild(imgFrag);
        // load image
        imageObj.onload = function () {
            console.timeEnd("Load time " + itr.currentIndex);
            console.log("Finished loading - " + current + ", Remaining - " + itr.remaining());
            imgElem.src = current;
            imgElem.className = "done";
            // step 
            itr.step();
       ...