Determining when an image is loaded

by beej

HTML

<button data-url="http://oddanimals.com/images/lime-cat.jpg">Lime cat</button>
<button data-url="http://i.stack.imgur.com/BZ33g.jpg">i can haz</button>
<button data-url="http://digital-photography-school.com/wp-content/uploads/flickr/205125227_3f160763a0_o.jpg">Mountains</button>
<button data-url="http://cdn.enjoyourholiday.com/wp-content/uploads/2011/02/Bryce-Canyon-A-Natures-Wonder-img1.jpg">Bryce Canyon</button>
<div>Width: <span id="width"></span>
</div>
<div>Height: <span id="height"></span>
</div>
<div id="imgContainer"></div>

JavaScript

$(function () {
    var img = new Image();

    function loadCallBack() {
        $('#imgContainer').empty().append(img);
        $('#width').text(img.width);
        $('#height').text(img.height);
    };

    $(img).load(loadCallBack);

    $('button').on('click', function (e) {
        img.src = $(e.target).attr('data-url');

        setTimeout(function () {
            if (img.complete || img.readyState === 4) {
                loadCallBack();
            }
        }, 25);
    });
});