如何获取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配合使用

回答

相关问题