javascript - javascriptで表示されない重いデータ処理の読み込み画像

Question

大量のデータ処理の前に画像を表示し、loading完了後に画像を削除したいので、次のコードを書きました。

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

しかし、ロードは表示されません！（次の行を残し$(this).append('<img src="loading.gif" />');て削除すると、画像表示が正しくロードされます）

Answer 1

これをテストしただけで動作します。 http://jsfiddle.net/Z3MX​​J/

<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>

Answer 2

遅延オブジェクトを使用できます

function processData( ) { ... }

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

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

});