Как получить плагин Scrollspy для Bootstrap для работы с LazyLoad

У меня длинная страница Divs. У некоторых есть изображения, у некоторых есть текст. У меня есть Scrollspy, прикрепленный к navbar, который выделяется, когда я прокручиваю список Divs.Как получить плагин Scrollspy для Bootstrap для работы с LazyLoad

Потому что есть несколько изображений, у меня также есть LazyLoad.

Задача, которую я имею, заключается в том, что на Divs с изображениями кажется, что lazyload заставляет 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>

... так что в приведенном выше коде, что происходит в том, что «тройка» в навигационной панели подсвечивается, когда пользователь по-прежнему прокрутки через «Два», который содержит изображения. Я считаю, что я мог бы сделать что-то с «обновлением» 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

Как получить плагин Scrollspy для Bootstrap для работы с LazyLoad

ответ

Смежные вопросы