我有一长页div。有些有图片，有些有文字。我把Scrollspy附在导航栏上，当我向下滚动div列表时，它会高亮显示。
因为有很多图像，我也安装了LazyLoad
我所面临的挑战是，在Div与图像，它似乎是懒惰负载导致滚动不正确读取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>
…所以在上面的代码中，发生的事情是导航栏中的"Three"被高亮显示，而用户仍然在滚动浏览包含图像的"Two"。我相信我可能不得不与Scrollspy的DOM的"刷新"做一些事情，但不太清楚如何做到这一点，或者如果它会解决这个问题:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
提前感谢您的协助!
这将在加载图像时调用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>