How to hide images until AFTER jquery flexslider finishes loading

Question

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.

When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.

I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )

I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});

score 22 · Accepted Answer · answered Feb 01 '13 at 22:04

22

You need to deal with the callback functions for the plugin you are using hide all the images from CSS by using a class let's say flexImages

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4, 
    start: function(){
         $('.flexImages').show(); 
    },
  });
});

answered Feb 01 '13 at 22:04

Seder

2,735
2
22
43

1

Thank you so much! that did the trick! Woothemes didn't mention doing that, yet their demos work perfect regardless! – user1945912 Feb 01 '13 at 22:21
2

I am glad it helped, but my advice to you is when you face such problems with plugins or such stuff read about their callbacks it really will help :) – Seder Feb 01 '13 at 22:23

score 6 · Answer 2 · answered Feb 01 '13 at 22:01

6

Set the default style for "display" to "none". using show() will change this style value.

answered Feb 01 '13 at 22:01

Steve H.

6,912
2
30
49

3

I want to add: It is important to do this on
elements.

Soroush Falahati

Feb 01 '13 at 22:05

score 1 · Answer 3 · answered Dec 03 '13 at 18:01

Also Found that the slides flash before loading and display stacked down the page with list item bullets.

Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.

Remember to Include the CSS!

score 1 · Answer 4 · answered Apr 21 '15 at 17:03

… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:

i just put some thing like that for the specific slider:

.MySlider {
  .flexslider .slides img { 
  max-height: 400px; 
  width: 940px;
 }
}

worked well, even responsive. Hope that may help!

score 0 · Answer 5 · answered May 29 '13 at 15:12

0

I experienced a similar issue when I forgot to include the flexslider.css

answered May 29 '13 at 15:12

Ross Hambrick

5,880
2
43
34

dmtnexer · Answer 6 · 2014-03-20T12:14:26.520

0

I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!

update: this is not a responsive solution as the slider changes the size... what can I do??

edited Mar 20 '14 at 12:14

answered Mar 18 '14 at 16:42

dmtnexer

29
2
2
8

How to hide images until AFTER jquery flexslider finishes loading

6 Answers6

Linked