bxslider在頁面加載之前堆疊

Question

我正在使用bx-slider，並面臨頁面加載的滑塊圖像未完全加載的問題。我希望這些圖像在完成頁面加載後應該在頁面加載或加載時完全加載，否則圖像將隱藏，直到頁面未完全加載。 這裏是Java腳本代碼

$(window).load(function() { 
var $heroSlides = $('.hero-slider ul.bxslider > li'); 
     if ($heroSlides.length > 1) { 
      var slider = $('.hero-slider .bxslider').bxSlider({ 
       responsive: true, 
       auto: true, 
       pause: 5000, 
       controls: false, 
       autoHover: true, 
       mode: 'fade' 
      }); 
     } 
}); 

Answer 1

試試這個 - 更新你的CSS和隱藏滑塊外DIV

.hero-slider { 
display:none; 
} 

，然後就在你的腳本滑塊呼叫之前表現出來。

 $(window).load(function() { 
    $('.hero-slider').show(); 
    var $heroSlides = $('.hero-slider ul.bxslider > li'); 
      if ($heroSlides.length > 1) { 
       var slider = $('.hero-slider .bxslider').bxSlider({ 
        responsive: true, 
        auto: true, 
        pause: 5000, 
        controls: false, 
        autoHover: true, 
        mode: 'fade' 
       }); 
      } 
    }); 

嘗試用document.ready如果window.load不起作用。