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

Laurentian

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.

Laurentian

This gives me a bug where for a split second the image gets distorted and stretched, seems to happen when images are done loading. – Richelieu

In which browser? I can't see it – Laurentian

May be it's too late to comment, but yes the first image gets stretched for half second. It happens when you're viewing it in your mobile device. In Chrome, Opera, Mozzila & almost every browser. – Baroda

I'm having this issue too. – Bipartite

Worth noting that you also need to add the CSS3 backface-visibility Property in conjunction with the -webkit-backface-visibility property to increase browser compatibility. – Upcountry

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)

Tai

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

Ibiza

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

Banns

This one actually helped me, tnx. Css solutions were showing first hidden slide but it was already in some 33% width, i guess i have older or new version of flexslider. – Aron

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

Holloway

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.

Tenaille

Sorry, that didn't work. And I really don't want to change from flexslider. – Laurentian