jquery - bxSLider 不显示加载图像

Question

我正在使用 bxSlider在客户的网站上显示我的主页幻灯片。它工作得很好，是一个非常好的功能丰富的免费幻灯片工具，所以我不能提示。

但是，在 bxslide 站点上，当未加载图像时，它们会显示加载 Pane 。加载图像后，它会显示加载的图像。然而，在我的网站上，当图像未加载时没有加载图像，它只是像您在下图中看到的那样自行折叠，直到图像加载足以填充空间

然后它突然加载并且有一个像这样的图像

为什么我在等待图像加载时没有让加载图标填满那个空间？这是我目前用来调用我的 slider 的 jquery

slider = $('.bxslider').bxSlider({
    auto: true,
    mode: 'fade',
    pause: 10000,
    speed: 2000,
    pager: false,
    useCSS: false
});
slider.goToSlide(1);

和 slider 的 HTML

<div class="slider">
    <ul class="bxslider">
        <li><a href="#"><img src="image.png" alt="Banner" /></a></li>
    </ul>
</div>

最后这是一个带有我所有 css 的 codePen，因为有太多东西要发布到 SO。

http://codepen.io/anon/pen/aprBdK

Answer 1

将选项 adaptiveHeight 添加到您的 bxSlider 初始化中。

如果没有加载图像，幻灯片的默认设置高度为 0。如果包含自适应高度属性，幻灯片高度将永远不会为 0(除非幻灯片中确实没有图像)。

slider = $('.bxslider').bxSlider({
    auto: true,
    adaptiveHeight: true,
    mode: 'fade',
    pause: 1000,
    speed: 2000,
    pager: false,
    useCSS: false
});
slider.goToSlide(1);