Question

在jQuery文档页面上，我注意到在我滚动到页面的那一部分之前，Disqus注释没有打开。

向下滚动此页面底部，您会发现影响：http://api.jquery.com/child-selector/

我很想知道这是怎么做的，因为我想在我的网站上使用它，因为它有助于减少页面加载时间。

Answer 1

查看该页面的来源，从第461行开始：

jQuery(function(){
  var ds_loaded = false, 
      top = jQuery("#comments").offset().top,
      instructionsCloned = false;

  function check(){
    if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {
        jQuery.getScript("http://jquery.disqus.com/disqus.js?v=2.0&slug=child_selector_8220parent_child8221&pname=wordpress&pver=2.12");
        ds_loaded = true;
    } else if ( !instructionsCloned && document.getElementById('dsq-form-area') ) {

      var instructions = jQuery('ul.comment-instructions');

      instructions.clone().css({
        backgroundColor: instructions.css('backgroundColor'),
        borderWidth: instructions.css('borderWidth'),
        padding: '1em',
        margin: '1em 0'
      }).prependTo('#dsq-form-area');

      jQuery("#dsq-new-post > h3").text("Add a Contribution");

      instructionsCloned = true;
    }
  }

  jQuery(window).scroll(check);

  check();

});

他们首先获得评论div顶部的偏移量：

top = jQuery("#comments").offset().top

然后他们定义了一个名为check()的函数，它检查窗口的当前滚动高度是什么，如果加上窗口高度大于偏移值，则加载disqus脚本： / p>

if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {...}

然后他们将此check()函数绑定到窗口的scroll事件：

jQuery(window).scroll(check);

tl; dr：每次滚动页面时，他们都会根据注释div的偏移高度检查滚动的高度，如果可以查看，则会加载disqus脚本（加载注释）。

HTH：）

在滚动时看到/到达div时加载div内容

1 个答案: