Problème de chargement JQuery lors du premier chargement / rafraîchissement brutal

Question

Salut tout le monde, voici le site VOIR PLUS BAS

J'ai un léger problème de requête et je n'arrive pas à comprendre comment le déboguer.

la bande de vignettes est supposée défiler lorsque vous la survolez. Lorsque la page est chargée ou lors d’un rafraîchissement brutal, elle ne défile pas.

Si j'actualise la page (normalement, il ne s'agit pas d'une actualisation physique), cela fonctionne correctement.

Des idées?

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

Voici une version propre sans aucun autre code:

Lien ici

Et voici le code JS que j'utilise pour produire le parchemin

Voir la seconde moitié pour le code qui le fait défiler.

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

Peut-être que si vous pouviez poster le code, ce serait plus facile que de parcourir la page pour l'inclusion exacte à laquelle vous faites référence ...

Quoi qu'il en soit, je parie que vous n'incluez pas vos méthodes init comme elles devraient l'être pour garantir que le DOM est entièrement chargé:

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

J'ai eu un problème très similaire.

J'ai également essayé de changer document.ready () en window.load () mais je n'ai pas résolu mon problème.

Après de nombreuses recherches, j’ai appris que la taille de l’image posait problème. J'avais besoin de 400 * 400 images px, mais j’utilisais d’énormes images, par exemple. certaines images dépassaient 1080p.

Lorsque j'ai redimensionné mes images et que j'ai chargé de nouveau ces images ... cela a fonctionné.

Answer 3

Je suppose que c'est parce que vous utilisez height () ou des méthodes de position similaires avant le chargement des images.

Cependant, sans voir le code source, je ne peux pas vous en assurer.