Javascript 在引导转盘完全加载时显示加载Gif

我有一个加载gif显示在屏幕上，直到所有引导转盘幻灯片加载完毕。当图像来自lorempixel.com时，它就开始工作了。但是，现在我有两个图像，我希望加载

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

我的引导滑块代码：

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

有人能告诉我我做错了什么吗？谢谢你

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

这段代码应该放在文件的底部，在标记之前

为什么放在头上不起作用？ 因为HTML通常从上到下加载，这意味着在加载内容、加载等元素之前加载脚本。由于这个原因，您的脚本无法找到这些元素，并且什么也没做

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