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

回答

相關問題