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并显示img#loading加载div.orbit-container所需的时间，然后隐藏img#loading并显示div.orbit-container加载。任何帮助表示赞赏！

这是一个小提琴：http://jsfiddle.net/Y9CQ4/96/
1）div.orbit-container成功隐藏了 2）img#loading成功显示了 3）img#loading成功隐藏了 4）div.orbit-container不会消失...这就是问题所在。

答案（如下所述）是将.html()替换为.append()，就像在这个小提琴中一样：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');
        });

Answer 2

HTML：

<div class="topslider">
    <div class="orbit-container">
        CONTENT HERE
    </div>
    <div id="loading" style="display:none;">LOADING</div>
</div>

jQuery的：

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

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

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

2 个答案: