IMG Events

by ScottRippey

HTML

<button> Toggle Timer </button>
<img />
<br>
<pre id="output"></pre>

CSS

img {
    float: right;
    width: 200px;
}

JavaScript

var img = document.querySelector('img');

var imgIndex = 0, timer;
function toggleTimer() {
    
    if (!timer) {
        clearOutput();
        timer = setInterval(loadNextImage, 1000);
        loadNextImage();
    }
    else {
        clearInterval(timer);
        timer = null;
    }
}
function loadNextImage() {
    var images = [
        "//lorempixel.com/20/10",
        "//lorempixel.com/200/100",
        "//lorempixel.com/800/500",
        "//lorempixel.com/22/11",
        "INVALID IMAGE"
    ];
    var nextImage = images[imgIndex++ % images.length];

    resetTimer();
    output("");
    output("Complete? " + img.complete);
    output("Loading " + nextImage);
    img.removeAttribute('src');
    img.src = nextImage;
    output("Complete? " + img.complete);
}
var time;
function resetTimer() {
    time = new Date().getTime();
}
function getTimeDiff() {
    var timeDiff = ((new Date().getTime()) - time).toString();
    while (timeDiff.length < 3) timeDiff = "0" + timeDiff;
    return timeDiff;
}
function output(msg) {
    var output = document.getElementById("output");
    if (msg) msg = getTimeDiff() + ": " + msg;
    output.textContent += msg + "\n";
}
function clearOutput() {
    document.getElementById("output").textContent = "";
}

for (var prop in img) {
    if (prop.slice(0,2) === 'on') {
        (function(eventName){
            img.addEventListener(eventName, function() {
                output("Event: " + eventName);
            });
        })(prop.slice(2));
    }
}
/*
["load","error","abort","loadstart","progress","waiting"].forEach(function(event) {
    img.addEventListener(event, function() {
        output("Event: " + event);
    });
});
*/


document.querySelector("button").addEventListener('click', toggleTimer);
toggleTimer();