Detect when a specific image has ended

Question

I have an image on a web page that is dynamically generated by server side CGI program. This image is periodically updated by the timer and / or changed based on user input. So I have a Javascript function like

// <img id="screen" src=""> is elsewhere in the page
function reloadImage() {
    $("#screen").attr("src", make_cgi_url_based_on_form_inputs());
}

This works fine, but sometimes it takes a while to load the image. Therefore, I would like some kind of message to appear that says "Loading image ...", but then this image will disappear when the image is downloaded and displayed in the browser.

Are there any Javascript events that can do this? Alternatively, is there another way to upload / modify / update the image and determine when the download is complete, via Ajax or something else?

Answer 1

You can try this jquery solution: http://jqueryfordesigners.com/image-loading/

$(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
    });