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 flexslid

Answer 1

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