How to get Twitter Bootstrap's Scrollspy plugin to work with LazyLoad

Question

I've got a long page of Divs. Some have images, some have text. I have Scrollspy attached to the navbar, which highlights as I scroll down the list of Divs.

Because there are a number of images, i also have LazyLoad installed.

The challenge I have is that on Divs with images, it appears the lazyload is causing the scrollspy not to read the height of the Div properly. This means that the scrollspy highlights the nav of the next div before the current div is finished scrolling through.

Here is a simplified version of the code that I have:

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

...so in the above code, what happens is that "Three" in the navbar is highlighted while the user is still scrolling through "Two" which contains images. I believe I might have to do something with Scrollspy's "refresh" of the DOM, but not too clear on how to do that or if it would solve the issue:

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

Thanks for your assistance in advance!

score 2 · Answer 1 · answered May 21 '13 at 03:37

This will call refresh whenever image is loaded.

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

How to get Twitter Bootstrap's Scrollspy plugin to work with LazyLoad

1 Answers1