如何让 Twitter Bootstrap 的 Scrollspy 插件与 LazyLoad 一起使用答案

【问题标题】：How to get Twitter Bootstrap's Scrollspy plugin to work with LazyLoad如何让 Twitter Bootstrap 的 Scrollspy 插件与 LazyLoad 一起使用
【发布时间】：2013-04-23 17:44:59
【问题描述】：

我有一长页的 Divs。有的有图片，有的有文字。我在导航栏上附加了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>

...所以在上面的代码中，当用户仍在滚动包含图像的“二”时，导航栏中的“三”被突出显示。我相信我可能不得不对 Scrollspy 对 DOM 的“刷新”做一些事情，但不太清楚如何做到这一点，或者它是否能解决问题：

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

提前感谢您的帮助！

【问题讨论】：

标签： twitter-bootstrap lazy-loading scrollspy

【解决方案1】：

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

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

【讨论】：