bxSLider not showing loading image

我使用bxSlider在客户的网站上显示我的主页幻灯片。它工作得很好，是一个非常好的功能丰富，免费的滑动工具，所以我不能抱怨。bxSLider not showing loading image

但是，在bxslide网站上，它们有加载窗格显示图像未加载时的情况。一旦图像加载，它就会显示加载的图像。。但是我的网站，也未加载图像时没有加载图像，它只是倒在自己就像你在下面的图片中看到，直到图像加载足以填补空间

然后它只是突然加载，并有一个像这样的

为什么我没有得到加载图标填充这个空间时，我在等待图像加载？下面是我使用打电话给我滑块目前

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

而且滑块

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

最后这里的HTML jQuery是用我所有的CSS的codePen，因为有太多的发布到SO。

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

来源

2017-02-17 Kaboom

我与bxSlider经验合理数量，但你的codepen需要包括bxSlider JS库，以及一些占位符图片。尝试使用http://placehold.it。 – SpyderScript

我更新了codepen以包含正确的东西 – Kaboom

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

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

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

来源

2017-02-17 17:56:03 SpyderScript

我在发布后不久发现了这个，但是谢谢你，主席:) – Kaboom

bxSLider not showing loading image

回答

相关问题