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.