Question

我正在尝试使用此链接添加图像滑块BxSlider除了在页面加载时对滑块图像进行stacjed加载之外，滑块中的每个东西都能正常工作。当页面加载时，所有图像都以堆叠方式一个接一个地垂直显示，这是我无法解决的。

这是HTML ..

<div id="slider" style="padding-top:77px;">
<ul class="bxslider">
 <li>
  <img src="img/new_images/dots.jpg" />

 </li>
 <li>
  <img src="img/new_images/workforce.jpg" />

 </li>
 <li>
  <img src="img/new_images/telecom.jpg" />

 </li>
 <li>
  <img src="img/new_images/expectations.jpg" />

 </li>
 </ul>

这是jquery for it ..

$(document).ready(function () {
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            pager: false
        });
        });

请帮帮我..

Answer 1

添加preloadImages选项并将其设置为all' or visible`。

全部 - 将加载所有图像，然后启动滑块可见：加载可见图像，然后启动滑块。

$(document).ready(function () {
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            preloadImages : 'all',
            pager: false
        });
        });

解决方案2：

隐藏父div <div id="slider">并在滑块完全加载后显示..

$(document).ready(function () {
       $("#slider").hide();
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            preloadImages : 'all',
            pager: false,
            onSliderLoad : function(){
               $("#slider").fadeIn();
            }
        });
        });

图像滑块和页面加载时图像的堆叠外观

1 个答案: