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不起作用。