How do I display a gif animation to the user while a picture is loading (in the web)?

Question

The problem: I have set of pictures, when the user presses on one of them, it's grow to an area in the page. The exchange of the pictures is done with the help of js. Tthe picture is weigh about 0.5M, therefore it's take about 3 sec until the picture is showed. I would like to present a type of animation while the picture is not displayed. How can I do this with the help of js?

Answer 1

There's always the "marquee" tag with a "loading" message that you turn off as soon as your image is swapped in. Of course, even I would downvote anyone advocating marquee.

Answer 2

Use the load event, something like:

$("img.something").click(function() {
    $(".someDiv").html('<img src="loading.gif"/>');
    var $img = $('<img src="bigImage.jpeg" style="display:none"/>');
    $img.load(function() {
        // once the loading has completed
        $(".someDiv").html($(this));
        $(this).fadeIn("slow");
    });
});

Answer 3

Insert a placeholder element and attach an onload event callback to the <img> element. With jQuery,

var imageElem = $('<img />'),
    placeholder = $('<div class="loading">Loading...</div>');

imageElem.attr('src', 'http://example.com/big_image.jpg');

$('#images').append(placeholder).append(imageElem);
imageElem.hide().load(function() {
    placeholder.remove();
    imageElem.fadeIn();
});