Images in jQuery Nivo slider undesirably appear when they're loading


So I'm working on a site where I've implemented the Nivo slider and the problem I have is that, when my page loads (fresh or after cached) is that the images all show up straight down the page and when the page fully loads, then the images disappear and the slide animations begin.

Check it out here, on the top of the page where the images change. When the page loads up, you'll see the images that are supposed to be hidden, appear, then disappear into the slide.

http://www.bandofthedark.com/

I've tested on multiple browsers etc.

Apply display: none; to all your images except the first one.

e.g.:

<img src="imgs/botdEVENTone.jpg" width="820" height="300" style="display: none;" />

If you are implementing this into WordPress you just add display:none to the li tag.

<li style="display:none;"> </li>

problem solved! in the slider's div style be sure to set the height of your images and set the overflow of the div to hidden

#slider {
  height: 300px; 
  overflow: hidden; 
}