Использование Scrolllspy Twitter Bootstrap для ленивой загрузки (загрузка на прокрутке) async JavaScript?

Question

Во-первых, так я обычно загружаю комментарии.

HTML разметки:

<div id="comments"> 

    <div id="disqus_thread"> 

     <!-- Comments are dynamically loaded (via JS) here. --> 

    </div> 

</div> 

И JavaScript код (custom.js):

$j=jQuery.noConflict(); 

$j(document).ready(function() { 

    $j('#displayComments'); 
    var disqus_shortname = 'paulund'; 

    $j.ajax({ 
     type: "GET", 
     url: "http://" + disqus_shortname + ".disqus.com/embed.js", 
     dataType: "script", 
     cache: true 
    }); 

}); 

Теперь, приходя в точку ...

Я бы хотел загрузить комментарии, только когда пользователь прокручивается вниз к разделу комментариев, то есть div#comments.

Хотя это не предназначено для этой цели, мне сообщили, что для этого можно использовать Twitter Bootstrap's Scrollspy plugin.

Но я не уверен, как.

(Я прочитал документацию и пробовал различные наценки, но не мог заставить его работать, и решил начать с нуля.)

Вот скелет комментариев, чтобы проверить на: http://jsfiddle.net/MvTgk/ (и его respective demo)

PS: в случае, если у вас нет времени, чтобы написать полноценный ответ, пожалуйста, напишите какие-либо намеки/предложения в комментариях. Я буду счастлив попробовать их сам.

Answer 1

Плагин ScrollSpy, вероятно, не тот, который вы должны использовать.

Согласно документации Bootstrap «плагин ScrollSpy предназначен для автоматического обновления навигационных целей на основе положения прокрутки». Поэтому его следует использовать только для этого.

Поскольку вы используете jQuery, вы можете использовать Sizzle для проверки, когда поле комментариев is visible.

$(window).on("scroll", function check() { 
    if($('#displayComments').is(':visible')) { 
     // Remove event listener as it is not needed anymore 
     $(window).off("scroll", check); 

     $.ajax({ 
      type: "GET", 
      url: "http://" + disqus_shortname + ".disqus.com/embed.js", 
      dataType: "script", 
      cache: true 
     });  

    } 
});  

Answer 2

Ну, учитывая, что Scrollspy Twitter Bootstrap является не для цели я после, я решил пойти с jQuery Waypoints. Ленивая загрузка комментариев только тогда, когда раздел попадает в поле зрения, очень прост.

Вот как я должен был изменить код JavaScript:

$j = jQuery.noConflict(); 
$j(document).ready(function() { 

    $j('#comments').waypoint(function() { 

     var disqus_shortname = 'paulund'; 
     $j.ajax({ 
      type: "GET", 
      url: "http://" + disqus_shortname + ".disqus.com/embed.js", 
      dataType: "script", 
      cache: true 
     }); 

    }, { offset: '100%', triggerOnce: true }); 

}); 

ПРИМЕЧАНИЯ:

• offset: '100%'is used to make sure что комментарии Javascript отображаются как только div#comments приходит в поле зрения (от внизу, когда мы прокручиваем вниз), и не только когда он попадает в верхнюю часть порта просмотра, который является значением по умолчанию.

• triggerOnce: true гарантирует, что действие запускается только один раз, то есть путевая точка разрушится после первого запуска (то есть не будет запускаться каждый раз, когда пользователь прокручивает страницу вверх/вниз). Это то же самое, что и вызов .waypoint('destroy') в конце функции обратного вызова.