Flexslider slow image load

Question

I am using Flexslider on a website I'm building.

I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar.

The negative about it is that it doesn't display the first image before all images are loaded. So you have to wait to all images in the slider is loaded to make the site look properly. This is acceptable on a desktop/laptop but not on a mobile device.

I found a similar question here Flexslider - image preloader but I couldn't get it to work.

I use this to trigger the code

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

And this in my HTML

                <ul class="slides">             
                <li>
                    <img src="pictures/slide1.jpg" alt=" ">
                <li>
                    <img src="pictures/slide2.jpg" alt=" ">                         
                </li>
                <li>
                    <img src="pictures/slide3.jpg" alt=" ">
                </li>
                <li>
                    <img src="pictures/slide4.jpg" alt=" ">
                </li>
            </ul>

The question is. How can I make the slider show the first image as quick as possible? and then the second and so on.

EDIT: I solved the problem. It is presented in the correct answer below. If you have a better solution: please share :D

Answer 1

Ok. so I found out a way to do it.

in the flexslider css file add this line

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;} 

at the line after this line:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

That will make the first image appear and it will wait for the other images to load before it spins.

Answer 2

I know this is an old issue but I have a simpler solution.

Find

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

and change the selector to

.flexslider .slides > li:not(:first-child)

Answer 3

I have quickly fix this issue by adding css style in flexslider stylesheet the style is:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}

Answer 4

I found smoothest way to do this.

Add a div with slider's first image before flexslider container like this.

<div class="pre-flexslider-container">
     <img src="slider.jpg">
</div>
<div class="main-flexslider-container" style="display: none">
    <div class="flexslider">
    .
    .
    .
    </div>
</div>

Then add following code to flexslider initalization:

$(window).load(function(){
  $('.flexslider').flexslider({
    .
    .
    .
    .
    .
    start: function(slider){
        $('.pre-flexslider-container').css("display","none");
        $('.main-flexslider-container').css("display","block");
        slider.resize();
    }
  });
});