Spry Slideshow Shows All While Loading

Question

The Spry Slideshow I built shows all the slides at once while it is loading for the first time. Is there a way to quell this, as it makes the viewer a little queasy -- especially on slow-loading connections. I tried moving the "unobtrusive" javascript file to the end of the page, but that did nothing.
Suggestions?

Answer 1

Excellent suggestion!
First, here are the JS files that get linked in the head of the web page:
SprySlidingPanels.js
SpryDOMUtils.js
Second, here is the basic structure of the slideshow (someone else worked on the CSS, so I cannot vouch for it--though the same thing seems to happen in any slideshow I build, so I seriously doubt there is a CSS issue causing this.)
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
            <div id="item1" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="next"><a href="#" id="link2">Next &gt;&gt;</a></div>
            </div>
            <div id="item2" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link1">Prev &lt;&lt;</a></div>
                <div class="next"><a href="#" id="link3">Next &gt;&gt;</a></div>
            </div>
            <div id="item3" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link2">Prev &lt;&lt;</a></div>
                <div class="next"><a href="#" id="link4">Next &gt;&gt;</a></div>
            </div>
            <div id="item4" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link3">Prev &lt;&lt;</a></div>
                <div class="next"><a href="#" id="link5">Next &gt;&gt;</a></div>
            </div>
            <div id="item5" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link4">Prev &lt;&lt;</a></div>
            </div>
</div>
</div>
    <div class="bottback">
        <p class="navLinks">
          <a href="#" id="link1">Link</a> |
          <a href="#" id="link2">Link</a> |
          <a href="#" id="link3">Link</a> |
          <a href="#" id="link4">Link</a> |
          <a href="#" id="link5">Link</a>
        </p>
    </div>
  </div>
Lastly, here is the "unobtrusive" code:
//Declare the variable name outside the function so it is global.
var sp;
function InitPage()
sp = new Spry.Widget.SlidingPanels("ticker");
Spry.$$("#link1").addEventListener("click", function(){sp.showPanel('item1');return false; }, false);
Spry.$$("#link2").addEventListener("click", function(){sp.showPanel('item2');return false; }, false);
Spry.$$("#link3").addEventListener("click", function(){sp.showPanel('item3');return false; }, false);
Spry.$$("#link4").addEventListener("click", function(){sp.showPanel('item4');return false; }, false);
Spry.$$("#link5").addEventListener("click", function(){sp.showPanel('item5');return false; }, false);
Spry.Utils.addLoadListener(InitPage);
What's weird is that I seem to be the only soul in the universe experiencing this. And yet, every single slideshow I develop shows all panels on load... why?