JQuery Flexslider does not load every time

Question

I have FlexSlider on a customers website. The problem is that it does not load every time. Sometimes it's just empty. The area in which it should be.

Now this is the code that the slider creates:

<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> 

It launches jQuery FlexSlider v1.8 .

How can I make it more stable?

It can be tested at : http://xlprint.no/

Answer 1

This may be a synchronization problem, flexslider may require loading images when it is called so that it can turn off its attributes, remember that $ (document) .ready () is triggered after the DOM download finishes, while $ (window) .load () fires after loading all the images on the page - gives you periodic results, if they are cached, etc., replace:

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

from

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

By the way, a working github example also uses $ (window) .load.

Answer 2

I know this seems ridiculous ... But I had a similar problem with my flexslider and this solution (ugly but solvable)

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