响应式图像滑块bxslider仅在页面重新加载时有效

Question

我想在我的网站上使用响应式图像滑块'bxslider‘(bxslider.com)。不幸的是，滑块的图像通常不会出现在页面上，只有控件是可见的。然而，只要我刷新页面，滑块的图像就会重新出现。

我看过这里提出的类似问题，但他给出的建议-例如“只使用jQuery 1.x”-似乎对我不起作用。

如果有人有另外的建议，那就太好了！实际的网址是：http://www.lauraniebel.com/casestudy01.htm和http://www.lauraniebel.com/casestudy02.htm，下面是我的代码：

    <script src="js/modernizr-2.8.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>


    <div class="bxslider3">    
            <img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters">
            <img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters">
        </div>

<div class="bxslider">    
            <img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic">
            <img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup">
        </div>

<div class="bxslider2">    
            <img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters">
            <img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters">
        </div>


<script>
      $( document ).ready(function(){
      $('.bxslider').bxSlider();
    });

      $( document ).ready(function(){
      $('.bxslider2').bxSlider();
    });


     $( document ).ready(function(){
      $('.bxslider3').bxSlider();
    });
 </script>

Answer 1

将您的图像包装在一个容器中，并给该容器一个明确的宽度和高度。

或者将bxslider设置为在图像加载后加载，可以使用image onload

现在，bxslider在图像加载之前就进行了初始化，为它们计算了0的宽度和高度，因此没有给出它们的外观。

jsfiddle

我已经将您的图像包装在一个<div class="container"></div>中，给定了显式的宽/高。问题是内联元素(图像)根据其内容(未加载的图像)计算宽度/高度，而bxslider使用0宽度/高度来初始化自身。

Answer 2

典型的jQuery问题。JavaScript就像是“你的图像完成了吗？”找到这个小插件..。它会在scr之前检测所有图像是否都已正确渲染

Github link

CDN：

<script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>