Question

我在我的网站上使用Bxslider，标记如下：

<div class="slide"> 
<a target="_blank" href="#"><img src="image.jpg"/></a> 
</div>
<div class="slide"> 
<a target="_blank" href="#"><img src="image2.jpg"/></a> 
</div>
<div class="slide"> 
<a target="_blank" href="#"><img src="image3.jpg"/></a> 
</div>
<div class="slide"> 
<a target="_blank" href="#"><img src="image4.jpg"/></a> 
</div>
<div class="slide"> 
<a target="_blank" href="#"><img src="image5.jpg"/></a> 
</div>

由于使用的某些图像太大，滑块需要很长时间才能加载。加载时，它会显示旋转圆圈，并且仅在加载所有图像时显示图像。有没有机会我可以强制它在加载时显示图像，一次一个？

这是jQuery使它工作：

 $(document).ready(function(){
          $('.slider1').bxSlider({
            slideWidth: 258,
            minSlides: 1,
            maxSlides: 3.5,
            slideMargin: 10,
          });
        });

Answer 1

试试这个技巧

开始将 display：none css添加到包含所有幻灯片的div中

<div class="slide" style="display:none">

并使用此JS代码

var obj;
$(document).ready(function(){
    obj=$('.slide').bxSlider({
       slideWidth: 258,
       minSlides: 1,
       maxSlides: 3.5,
       slideMargin: 10,
    });
   $(".slide").show();
   obj.reloadSlider(); 
});

reloadSlider（）是bx-slider lib内置函数。

我希望这可以帮到你！

Bxslider - 在加载时显示图像

1 个答案: