Question

我有一个加载gif出现在屏幕上，直到加载所有Bootstrap轮播幻灯片。当图像来自lorempixel.com时，它可以正常工作。但是，现在我有两张我希望加载的图片。

该功能在第一次尝试时效果很好。但是，当我重新加载页面时，加载的gif会保留在屏幕上并且不会消失，从而显示幻灯片。

My Bootstrap Slider Code：

<div id="content">
<div id="homeCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div class="carousel-inner">
<div class="active item">
<img class="large" src="http://localhost/agency/img/slide1.jpg" />
</div>
<div class="item">
<img class="large" src="http://localhost/agency/img/slide1.jpg" />
</div>
</div>  
<a class="carousel-control left" href="#homeCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#homeCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

<div id="loading">
<img class="img-responsive" src="img/loading.gif">
</div>

主管部分的脚本：

<script src="js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function (){
$('#content').hide();
$('#loading').show();
$('.large').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});
});
</script>

有人能告诉我这里做错了什么吗？谢谢......

Answer 1

<script>
$(document).ready(function (){
$('#content').hide();
$('#loading').show();
$('.large').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});
});
</script>

此代码应位于文件底部，</body>标记之前。

为什么放在头上会不起作用？ 因为HTML通常从上到下加载，这意味着在加载＃content，#loading等元素之前加载脚本。因此，您的脚本无法找到这些元素，也没有做任何事情。

注意：我不确定你的剧本是否正确，我在这里已经回答了“你做错了什么”。

在Bootstrap Carousel满载时显示正在加载Gif

1 个答案: