Check all image load status

by tonytlwu

HTML

Load <input id="count" type="number" value="20" step="10" /> images <button id="start">Start</button>
<pre id="debug"></pre>
<div></div>

CSS

img {
    width: 100px;
    height: auto;
}

input[type=number] {
    line-height: 2;
    width:50px
}

span {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

JavaScript

var flRendered = function () {
    //Render complete
    window.renderedTime = new Date().getTime();
    document.getElementById('debug').innerHTML = renderedTime + ': Rendered - ' + (renderedTime - loadedTime) + 'ms diff';
}

var flStartRender = function () {
    //Rendering start
    requestAnimationFrame(flRendered);
}

var flImagesOnScreenLoaded = function ()  {
    window.loadedTime = new Date().getTime();
    document.getElementById('debug').innerHTML = loadedTime + ': Loaded';
    requestAnimationFrame(flStartRender);
}

var flCheckImageLoadStatus = function () {
    var imgs = document.querySelectorAll('img');
    var bgImgs = document.querySelectorAll('[style*=\'background-image\'][style*=\'url(\']');
    var totalImgCount = imgs.length + bgImgs.length;
    document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + (' - ' + imgs.length + ' images, ' + bgImgs.length + ' background images');
    var urls = [];
    
    for (var i = 0, l = imgs.length; i < l; i++) {
        urls.push(imgs[i].src);
    }
    
    for (var i = 0, l = bgImgs.length; i < l; i++) {
        var urlSrc = bgImgs[i].style.backgroundImage;
        urls.push(urlSrc.substr(4,urlSrc.substr(4).length-1));
    }

    if (urls.length === 0) { flImagesOnScreenLoaded(); }
    
    var loadedCount = 0;
    for (var i = 0, l = urls.length; i < l; i++) {
        var img = document.createElement('IMG');
        img.onload = img.onerror = function(){
            loadedCount++;
            if (loadedCount >= totalImgCount) {
                flImagesOnScreenLoaded();
            }
        };
        img.src = urls[i];
    }
}

/* Test code below */

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 10; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function addImages() {
   ...