显示Bootstrap旋转木马完全加载时的加载Gif

Showing Loading Gif while Bootstrap Carousel is fully loaded

本文关键字：加载 Gif Bootstrap 旋转木马 显示      更新时间：2023-09-26

我有一个加载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>

这段代码应该放在文件的底部，</body>标记之前。

为什么放置在头部时不起作用因为HTML通常是从上到下加载的，这意味着在加载#content、#loading等元素之前加载脚本。由于这个原因，您的脚本找不到这些元素，什么也没做。

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

相关文章：