Problema di caricamento di Jquery al primo caricamento / aggiornamento fisico

Question

ciao a tutti, ecco il sito VEDI SOTTO

Ho un leggero problema jquery e non riesco a capire come eseguirne il debug.

la striscia di miniature dovrebbe scorrere quando ci si passa sopra. Quando la pagina viene caricata o caricata su un aggiornamento intenso, non scorre.

Se aggiorno la pagina (normalmente, non un aggiornamento fisico), funziona benissimo.

Qualche idea?

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

Ecco una versione pulita senza altro codice:

Link qui

Ed ecco il codice JS che sto usando per produrre lo scroll

Vedi la seconda metà per il codice che lo fa scorrere.

   $(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

Forse se potessi pubblicare il codice sarebbe più semplice che navigare nella pagina per l'esatta inclusione a cui ti riferisci ...

Ad ogni modo, scommetto non stai racchiudendo i tuoi metodi init come dovrebbero essere per garantire che il DOM sia completamente caricato:

$(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

Ho avuto un problema molto simile.

Ho anche provato a cambiare document.ready () in window.load () ma non ho risolto il mio problema.

Dopo un sacco di R & D; ho scoperto che le dimensioni delle immagini causavano questo problema. il mio requisito era di immagini a 400 * 400 px ma stavo usando immagini enormi, ad es. alcune immagini erano superiori a 1080p.

Quando ho ridimensionato le mie immagini e ricaricato quelle immagini ... ha funzionato.

Answer 3

Suppongo sia perché stai usando height () o metodi di posizione simili prima del caricamento delle immagini.

Tuttavia, senza vedere il codice sorgente non posso dirlo con certezza.