Loading image for heavy data process not showing up by javascript

Question

I want to show a loading image before heavy data process and remove it after done, so I wrote this code:

$("a#myId").click(function(){
    $(this).append('<img src="loading.gif" />');
    ...
    ... doning some heavy data process (that take more that 5 seconds) here ...
    ...
    $("img[src='loading.gif']").remove();
});

But the loading does not show! (when I leave $(this).append('<img src="loading.gif" />'); and remove next lines, loading image display correctly)

the best way is to add a "loading" class to your "a" element and remove it... — silly
– silly, Commented Nov 22, 2012 at 14:29
thanks silly, your simple way solve my problem. it seems that add/remove element to/from DOM, need more longer time and cpu in compare with add/remove class. — ali
– ali, Commented Nov 28, 2012 at 13:06

gkiely · Accepted Answer · 2012-11-22 15:04:37Z

1

Just tested this and it works. http://jsfiddle.net/Z3MXJ/

<a id="myId" href="#">Click me</a>
<div id="target"></div>
<script>
$("#myId").click(function(){
    $('#target').append('<img src="http://www.consafelogistics.com/gfx_portal/loading.gif" />');

    var url = 'http://onerahi.cabu.school.nz/files/2012/09/goes-12-firstimage-large081701.jpg',
        img = $('<img>');
        img.hide();
        img.bind('load', function(){$(this).fadeIn();
            $("img[src$='loading.gif']").hide();
        });
        $('body div#target').append(img);
        img.attr('src',url);
});
</script>

answered Nov 22, 2012 at 15:04

gkiely

3,0071 gold badge26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno · Accepted Answer · 2012-11-22 14:36:36Z

0

You can use a deferred object

function processData( ) { ... }

$("a#myId").click(function(){

    $(this).append('<img src="loading.gif" />');
    $.when( processData ).then( function( ) { 
        $("img[src='loading.gif']").remove();
    });

});

answered Nov 22, 2012 at 14:36

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Loading image for heavy data process not showing up by javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related