Easyslider 1.7 help - all content displaying on page load

Question

In implementing Easy Slider 1.7 with jQuery on a page of mine, I find that when the page first loads, both images in the ul slider display and then the slider loads properly and only the first slide is displayed.

What is the best way to correct this so that the slider div doesn't display until the script has loaded properly? I'm using this code to run it:

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});

Answer 1

You can just hide the content via CSS, like this:

#slider { display: none; }

Then show it on page load as well:

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

To be safe I'd add a block to the page for non-JS users, could be a style sheet inside if you have a lot of these, otherwise just a style tag:

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

Answer 2

I added the code below to my css to hide the images from being stacked up.

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}