jQuery Flexslider 每次都无法加载

Question

我在客户的网站上使用了FlexSlider。问题是它并不总是成功加载。有时它会只显示空白，而不是应该出现的那个区域。

以下是产生轮播图的代码：

<script src="http://xlprint.no/js/jquery.flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$("#slider").flexslider({animation: "slide",slideDirection: "vertical"});});
</script>
<div class="eightcol" id="slider_container">
    <div id="slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="http://bildeserver.nconel.no/1356/slider/b7be410db5f05502f4b552a200e1f3de.png" alt="">
            </li>
            <li>
                <img src="http://bildeserver.nconel.no/1356/slider/a0204e4cce74ea2d4f33723710eca17a.png" alt="">
            </li>
            <li>
                <img src="http://bildeserver.nconel.no/1356/slider/3576f00127fc13ffa732e33237c5a7bf.png" alt="">
            </li>
        </ul>
    </div>
</div>

它运行的是jQuery FlexSlider v1.8。

我该如何使其更加稳定？

可以在此处进行测试：http://xlprint.no/

- Simen Olsen

---

当它“突然变空白”时，JavaScript控制台会显示哪些错误？并且对我来说运行正常-> http://jsfiddle.net/WENv5/ - Manse

这个链接已经失效了 http://dev.xlprint.no/js/jquery.flexslider-min.js 请尝试使用 http://xlprint.no/js/jquery.flexslider-min.js。它可以正常工作。 - Balaji Kandasamy

同样的问题。控制台上没有错误信息。 - Simen Olsen

Answer 1

这可能是一个时间问题，flexslider在调用时可能需要加载图像以便根据它们的属性进行工作。请记住，$(document).ready()在DOM完成加载后触发，而$(window).load()在页面上所有图像加载完毕后触发 - 如果它们被缓存等，则会给您带来间歇性的结果。请将以下代码替换：

$(document).ready(function(){ ... });

使用

$(window).load(function(){ ... });

顺便提一下，github上的工作示例也使用了$(window).load。

- Oli B

---

我不确定这是否解决了原帖作者的问题，但它帮助我解决了我的一个问题。+1 - deewilcox

Answer 2

我知道这似乎很荒谬......但我的flexslider也遇到了类似的问题，这个方法解决了它（丑陋，但解决了）

setInterval(function () { $('.flexslider').resize(); }, 100);

- Wagner Bertolini Junior