Jquery Loading problem on first load / hard refresh

hey everyone, here is the site SEE BELOW

I have a slight jquery problem and I cant seem to figure out how to debug it.

the strip of thumbnails is supposed to scroll when you hover over it. When the page loads, or it loads on a hard refresh, they dont scroll.

If I refresh the page (normally, not a hard refresh), it works fine.

Any ideas?

----------------UPDATE-------------------

Here is a clean version with no other code in the way:

Link here

And Here is the JS Code I am using to produce the scroll

See the second half for the code that makes it scroll.

   $(document).ready(function() {
    $('#slideshow').cycle({
  fx:     'fade', 
    next:   '#next', 
 pause: 1,
    prev:   '#prev',
 pause: '#pause',
 pager:  '.thumbs',
 pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
 pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
      //Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" width="75" /></a></li>'; 
     //  return '<li><a href="#"><img src="' + src + '"  height="90" /></a>开发者_开发技巧</li>'; 
                } 
 });
$(function() {
    //Pause slideshow on page load
    $("#slideshow").cycle('pause');

});


 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 //Get menu width
 var divWidth = div.width();
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 //Find last image container
 var lastLi = ul.find('li:last-child');
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});

---

I had a very similar problem.

I also tried changing document.ready() to window.load() but did not solve my problem.

After lots of lots of R&D I found out that image sizes were causing this problem. my requirement was 400 * 400 px images but i was using huge images e.g. some images were above 1080p.

When I re-sized my images and re-uploaded thoses images... it worked.

---

Maybe if you could post the code it'd be easier than browsing the page for the exact include you're referring to...

Anyway, I bet you're not enclosing your init methods how they should be to ensure the DOM is entirely loaded:

$(function (){
  // Put everything you want to run on page load here, to ensure it's
  // only run when the DOM has loaded entirely.
});

---

I guess it is because you are using height() or similar position methods before the images load.

However without seeing the source code I can't tell for sure.