Problema de carga de Jquery en la primera carga / actualización dura

Question

Hola a todos, aquí está el sitio VER ABAJO

Tengo un pequeño problema de jquery y parece que no puedo entender cómo depurarlo.

se supone que la tira de miniaturas se desplaza cuando pasa el cursor sobre ella. Cuando la página se carga, o se carga en una actualización completa, no se desplazan.

Si actualizo la página (normalmente, no una actualización completa), funciona bien.

¿Alguna idea?

---------------- ACTUALIZACIÓN -------------------

Aquí hay una versión limpia sin otro código en el camino:

Enlace aquí

Y aquí está el código JS que estoy usando para producir el desplazamiento

Vea la segunda mitad para ver el código que lo hace desplazarse.

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

Answer 1

Quizás si pudiera publicar el código sería más fácil que navegar por la página para obtener la inclusión exacta a la que se refiere ...

De todos modos, apuesto a que no está adjuntando sus métodos de inicio como deberían ser para garantizar que el DOM esté completamente cargado:

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

Answer 2

Tuve un problema muy similar.

También intenté cambiar document.ready () a window.load () pero no resolví mi problema.

Después de un montón de I + D descubrí que los tamaños de las imágenes estaban causando este problema. mi requisito era imágenes de 400 * 400 px pero estaba usando imágenes enormes, p. algunas imágenes estaban por encima de 1080p.

Cuando cambié el tamaño de mis imágenes y volví a cargar esas imágenes ... funcionó.

Answer 3

Supongo que es porque está utilizando height () o métodos de posición similares antes de que se carguen las imágenes.

Sin embargo, sin ver el código fuente, no puedo asegurarlo.