image onload test

test for setting timing of onload event listener

by cou929

HTML

<div>
     <h2>set src attribute before attaching onload listener</h2>

    <p>is onload called: <span id="result1"></span>
    </p>
    <p>complete attribute: <span id="result2"></span>
    </p>
</div>
<div>
     <h2>set src attribute after attaching onload listener</h2>

    <p>is onload called: <span id="result3"></span>
    </p>
    <p>complete attribute: <span id="result4"></span>
    </p>
</div>

JavaScript

// for caching
(new Image()).src = 'http://upload.wikimedia.org/wikipedia/commons/2/23/1x1.GIF?a=1';

setTimeout(function () {
    // set src attribute before attaching onload listener
    var img = new Image();
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/2/23/1x1.GIF?a=2';
    img.onload = function () {
        document.getElementById('result1').innerHTML = 'called';
    };
    document.getElementById('result2').innerHTML = img.complete;
}, 500);

setTimeout(function () {
    // set src attribute after attaching onload listener
    var img = new Image();
    img.onload = function () {
        document.getElementById('result3').innerHTML = 'called';
    };
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/2/23/1x1.GIF?a=3';
    document.getElementById('result4').innerHTML = img.complete;
}, 500);