jQuery:尝试在 div 加载时显示加载 gif

Question

我有一个不适合我的脚本 - 我不确定为什么，但我确信我没有做正确的事情。

JavaScript

<script>
    $('.topslider .orbit-container').hide();
    $('.topslider').html('<img src="img/loading.gif" id="loading" />')

    $(window).bind('load', function() {
        $('.topslider #loading').hide();
        $('.topslider .orbit-container').fadeIn('slow');
    });
</script>

HTML

<div class="topslider">
    <div class="orbit-container">
        [content here]
    </div>
</div>

我正在尝试隐藏 div.orbit-container 并在 div.orbit-container 占用的时间内显示 img#loading加载，然后隐藏 img#loading 并在加载后显示 div.orbit-container。如有任何帮助，我们将不胜感激!

这是一个 fiddle :http://jsfiddle.net/Y9CQ4/96/
1) div.orbit-container 隐藏成功
2) img#loading 显示成功
3) img#loading 隐藏成功
4) div.orbit-container 不会淡入……这就是问题所在。

<小时/>

答案(如下所述)是将 .html() 替换为 .append()，如这个 fiddle 所示: http://jsfiddle.net/Y9CQ4/97/

Answer 1

.html() 覆盖内部代码，.append() 将代码追加到当前内部代码所以通过 .html() 你删除你的轨道容器

$('.topslider .orbit-container').hide(); 
$('.topslider').html('<img src="http://lorempixel.com/400/200/" id="loading" />')

$(window).bind('load', function() {
            $('.topslider #loading').hide();
            $('.topslider').html('<div class="orbit-container">CONTENT HERE</div>')
            $('.topslider .orbit-container').fadeIn('slow');
        });

或使用 .append() fcn

$('.topslider .orbit-container').hide(); 
$('.topslider').append('<img src="http://lorempixel.com/400/200/" id="loading" />')

$(window).bind('load', function() {
            $('.topslider #loading').hide();
            $('.topslider .orbit-container').fadeIn('slow');
        });