Question

bootstrap carousel开始显示文档加载，但是我希望它在显示之后中的内容完全加载。

所以，我试图用jQuery .load()事件处理来表示，但没有发生。花了3个小时寻找解决方案，但没有运气。

以下是我尝试的代码。

CSS

#main-slider .carousel-indicators, #main-slider .carousel-inner, #main-slider .carousel-control { display: none; }

然后，

jQuery( document ).ready(function( $ ) { var $myCarousel = $('#main-slider'); $myCarousel.carousel(); $( "#main-slider" ).load(function() { $('.loading').hide(); $('#main-slider .carousel-indicators, #main-slider .carousel-inner, #main-slider .carousel-control').show(); }); console.log('Carousel Fully Loaded'); });

那是行不通的。加载图像不会隐藏，元素不会显示，甚至不会出现小控制台日志。

我做错了什么？完成此任务的最佳方法是什么？感谢

Answer 1

我发现这篇文章使用JQuery Deferred Objects加载图片：

http://bulkan-evcimen.com/lazy_load_bootstrap_carousel_images.html

并稍微调整了一下使用Bootstrap v3和一些虚拟图像。它也不需要使用模态。此示例在轮播中使用<img>标记：

$(function() {
    var carousel = $('.carousel').hide();
    var deferreds = [];
    var imgs = $('.carousel').find('img');
    // loop over each img
    imgs.each(function(){
        var self = $(this);
        var datasrc = self.attr('data-src');
        if (datasrc) {
            var d = $.Deferred();
            self.one('load', d.resolve)
                .attr("src", datasrc)
                .attr('data-src', '');
            deferreds.push(d.promise());
        }
    });

    $.when.apply($, deferreds).done(function(){
        $('#ajaxloader').hide();
        carousel.fadeIn(1000);
    });
});

body {
    text-align: center;
    left: 50%;
    right: 50%;
    margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div id="ajaxloader">
     <h4>Loading Images</h4>
     <img src="https://i0.wp.com/cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif"/>
  </div> 
  <div id="lazycarousel" class="carousel slide">
   <ol class="carousel-indicators">
     <li data-target="#lazycarousel" data-slide-to="0" class="active"></li>
     <li data-target="#lazycarousel" data-slide-to="1"></li>
     <li data-target="#lazycarousel" data-slide-to="2"></li>
   </ol>
   <!-- Carousel items -->
   <div class="carousel-inner">
    <div class="active item">
        <img data-src="http://lorempixel.com/1024/768/sports"/>
    </div>
    <div class="item">
        <img data-src="http://lorempixel.com/1024/768/nature"/>
    </div>
    <div class="item">
        <img data-src="http://lorempixel.com/1024/768/abstract"/>
    </div>
   </div>
   <!-- Carousel nav -->
     <a class="left carousel-control" href="#lazycarousel" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#lazycarousel" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
  </div>
</div>

对于CSS中带有背景图像的div，适用相同的方法 - 您只需要提前通过JQuery加载它们：

$(function() {
    var carousel = $('.carousel').hide();
    var urlRegExp = /\(([^)]+)\)/;
    var deferreds = [];

    // JavaScript array of images
    var imgs = [];

    // Pull all the images from CSS
    var carouselItems = $(".carousel-inner > .item");
    carouselItems.each(function() {
       var bgImage = $(this).css("background-image");
       // Extract the URL from CSS
       var bgImageUrl = urlRegExp.exec(bgImage)[1];
       // Create "dummy" images in JQuery to load in the background
       var imageToLoad = $("<img />").attr("data-src", bgImageUrl);
       imgs.push(imageToLoad);
    });
                          
    // loop over each img
    $.each(imgs,function(i, loadImg){
        var self = $(loadImg);
        var datasrc = self.attr('data-src');
        if (datasrc) {
            var d = $.Deferred();
            self.one('load', d.resolve)
                .attr("src", datasrc)
                .attr('data-src', '');
            deferreds.push(d.promise());
        }
    });

    $.when.apply($, deferreds).done(function(){
        $('#ajaxloader').hide();
        carousel.fadeIn(1000);
    });
});

body {
    text-align: center;
    left: 50%;
    right: 50%;
    margin: 20px;
}
.carousel-inner .item {
    width: 100%;
    height: 300px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg-image1 {
    background-image:url(http://lorempixel.com/1024/768/sports);
}
.bg-image2 {
    background-image:url(http://lorempixel.com/1024/768/nature);
}
.bg-image3 {
    background-image:url(http://lorempixel.com/1024/768/abstract);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div id="ajaxloader">
     <h4>Loading Images</h4>
     <img src="https://i0.wp.com/cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif"/>
  </div> 
  <div id="lazycarousel" class="carousel slide">
   <ol class="carousel-indicators">
     <li data-target="#lazycarousel" data-slide-to="0" class="active"></li>
     <li data-target="#lazycarousel" data-slide-to="1"></li>
     <li data-target="#lazycarousel" data-slide-to="2"></li>
   </ol>
   <!-- Carousel items -->
   <div class="carousel-inner">
    <div class="active item bg-image1">
    </div>
    <div class="item bg-image2">
    </div>
    <div class="item bg-image3">
    </div>
   </div>
   <!-- Carousel nav -->
   <a class="left carousel-control" href="#lazycarousel" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#lazycarousel" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
</div>

一切都加载后Bootstrap Carousel show

1 个答案: