2

Div の長いページがあります。画像付きのものもあれば、テキスト付きのものもあります。ナビゲーション バーにScrollspyを接続しました。これは、Div のリストを下にスクロールすると強調表示されます。

画像が多いので、LazyLoadもインストールしています。

私が抱えている課題は、画像を含む Div では、遅延ロードが原因で scrollspy が Div の高さを適切に読み取らないように見えることです。これは、現在の div のスクロールが完了する前に、scrollspy が次の div のナビゲーションを強調表示することを意味します。

これが私が持っているコードの簡略化されたバージョンです:

    <body>

    <ul class="nav nav-list bs-docs-sidenav ">
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>


    <div id="one">
      text
      text
      text
    </div>

    <div id="two">
      <p>
      <img class="lazy" src="images/loading.gif" data-original="images/two.png"  width="600" height="400" >
      <noscript><img src="images/two.png" width="600" height="400" ></noscript>
      </p>
       <p>
      <img class="lazy" src="images/loading.gif" data-original="images/two.png"  width="600" height="400" >
      <noscript><img src="images/two.png" width="600" height="400" ></noscript>
      </p>
    </div>

    <div id="three">
      text
      text
      text
    </div>



    <!-- bootstrap activations -->
    <script type="text/javascript"> 
        $('body').scrollspy()
    </script>

    <!-- lazy load -->
    <script src="scripts/jquery.lazyload.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        $("img.lazy").show().lazyload({ 
            threshold : 100,
            effect : "fadeIn",
        }); 
    </script> 

    </body>

...上記のコードでは、ユーザーがまだ画像を含む「2」をスクロールしている間に、ナビゲーションバーの「3」が強調表示されます。ScrollspyのDOMの「リフレッシュ」で何かをしなければならないかもしれないと思いますが、その方法や問題が解決するかどうかはあまり明確ではありません:

    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    });

事前にご協力いただきありがとうございます。

4

1 に答える 1

2

これにより、画像が読み込まれるたびに更新が呼び出されます。

    <script type="text/javascript"> 
        $("img.lazy").show().lazyload({ 
            threshold : 100,
            effect : "fadeIn",
            load : function() {
             $('[data-spy="scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
            });
        }); 
    </script>
于 2013-05-21T03:37:40.837 に答える