Reputation: 1223
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
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
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
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