Twitter bootstrap 如何获得Twitter引导'；s Scrollspy插件与LazyLoad一起使用_Twitter Bootstrap_Lazy Loading_Scrollspy

Twitter bootstrap 如何获得Twitter引导'；s Scrollspy插件与LazyLoad一起使用

twitter-bootstrap

Twitter bootstrap 如何获得Twitter引导'；s Scrollspy插件与LazyLoad一起使用,twitter-bootstrap,lazy-loading,scrollspy,Twitter Bootstrap,Lazy Loading,Scrollspy,我有一长页的div。有些有图像，有些有文字。我已附加到导航栏，当我向下滚动div列表时，它会高亮显示因为有很多图片，我也安装了我面临的挑战是，在带有图像的Div上，似乎懒散负载导致scrollspy无法正确读取Div的高度。这意味着scrollspy在当前div完成滚动之前高亮显示下一个div的导航下面是我的代码的简化版本： <body> <ul class="nav nav-list bs-docs-sidenav "> <li

我有一长页的div。有些有图像，有些有文字。我已附加到导航栏，当我向下滚动div列表时，它会高亮显示

因为有很多图片，我也安装了

我面临的挑战是，在带有图像的Div上，似乎懒散负载导致scrollspy无法正确读取Div的高度。这意味着scrollspy在当前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>

提前感谢您的帮助

这将在加载图像时调用刷新

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


$（.img.lazy”）.show（）.lazyload（{
阈值：100，
效果：“法登”，
加载：函数（）{
$（'[data spy=“scroll”]'）。每个（函数（）{
var$spy=$（this.scrollspy（'refresh'））
});
});

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