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();
    }
  });
});

Answer 5

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

if you set smoothHeight as true try in default mode then it can improve the performance also

Answer 6

There are a couple of ways you can go.

First you could try adding hidden image tags such as:

<img src="pictures/slide1.jpg" style="display:none">
<img src="pictures/slide2.jpg" style="display:none">
<img src="pictures/slide3.jpg" style="display:none">
<img src="pictures/slide4.jpg" style="display:none">
<ul>...your slides...</ul>

to preload your images. I would recommend against this method however.

Another solution which will show your content quickly (but has not been tested with IE6) is to use the slider found at https://github.com/ozzyogkush/jquery.contentSlider . This is a slider widget I've been developing which works great. It would require a slight change to your DOM layout, but you can have as complex slides as you need.