CODEWITHSUNDEEP
javascriptjqueryhtml
Alon Ashkenazi
Alon Ashkenazi

Reputation: 1223

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

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?

Upvotes: 6

Views: 794

Answers (3)

karim79
karim79

Reputation: 342795

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");
    });
});

Upvotes: 1

nanotech
nanotech

Reputation: 436

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();
});

Upvotes: 1

No Refunds No Returns
No Refunds No Returns

Reputation: 8356

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.

Upvotes: 2

Related Questions