最初のロード/ハードリフレッシュでのJqueryロードの問題

StackOverflow https://stackoverflow.com/questions/1638492

  •  08-07-2019
  •  | 
  •  

質問

皆さん、以下のサイトをご覧ください

わずかなjqueryの問題があり、それをデバッグする方法を理解できないようです。

サムネイルのストリップは、その上にカーソルを合わせるとスクロールするはずです。ページが読み込まれるとき、またはハードリフレッシュで読み込まれるとき、スクロールしません。

ページを更新すると（通常、ハード更新ではありません）、正常に動作します。

アイデアはありますか

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

これは、他のコードが邪魔されていないクリーンなバージョンです：

ここにリンク

そして、これが私がスクロールを作成するために使用しているJSコードです

スクロールさせるコードについては後半をご覧ください。

   $(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);
 });
});
役に立ちましたか？

解決

コードを投稿できる場合は、参照している正確なインクルードをページで閲覧するよりも簡単でしょう...

とにかく、私はあなたがinitメソッドをDOMが完全にロードされることを保証するためにどうあるべきかをベットしていません：

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

他のヒント

よく似た問題がありました。

document.ready（）をwindow.load（）に変更しようとしましたが、問題は解決しませんでした。

多くの研究開発の後、画像サイズがこの問題を引き起こしていることがわかりました。私の要件は400 * 400 pxの画像でしたが、巨大な画像を使用していました。一部の画像は1080pを超えていました。

画像のサイズを変更し、それらの画像を再アップロードすると...うまくいきました。

画像の読み込み前に height（）または同様の位置メソッドを使用しているためだと思います。

ただし、ソースコードが表示されない場合、確実に判断することはできません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top