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

});