如何獲取Twitter Bootstrap的Scrollspy插件與LazyLoad配合使用

我有一長串的Div。有的有圖像，有的有文字。我將Scrollspy連接到導航欄，當我向下滾動Div列表時，該導航欄將突出顯示。如何獲取Twitter Bootstrap的Scrollspy插件與LazyLoad配合使用

由於有多個圖像，我還安裝了LazyLoad。

我面臨的挑戰是在帶圖像的Divs上，看起來lazyload會導致scrollspy無法正確讀取Div的高度。這意味着滾動條在當前div完成滾動之前突出顯示下一個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>

...所以在上面的代碼中，什麼情況是，「三國」中的導航欄，而用戶仍然在滾動時強調通過包含圖像的「Two」。我相信，我有可能做一些與Scrollspy的DOM的「刷新」，但如何做到這一點，或者不太清楚它會解決這個問題：

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

感謝您的幫助提前！

來源

2013-04-23 user1070612

這會在每次載入圖像時調用刷新。

<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-21 03:37:40 uvgrin

如何獲取Twitter Bootstrap的Scrollspy插件與LazyLoad配合使用

回答

相關問題