仅当用户向下滚动时才加载部分页面的简单方法？答案

【问题标题】：Simple way to load part of the page only if users scrolls down?仅当用户向下滚动时才加载部分页面的简单方法？
【发布时间】：2011-07-17 07:18:31
【问题描述】：

都知道http://www.appelsiini.net/projects/lazyload 在用户向下滚动时加载图像。但是页面的一部分呢？

假设您的页面顶部有一些文本（始终显示），向下滚动您有很多选择区域（<option>element 3421</option> etc 内有很多元素）+其他各种元素。

是否可以加载页面的某些部分（包括例如那些<select>）？怎么样？

【问题讨论】：

标签： php javascript javascript-framework

【解决方案1】：

这听起来像是 jquery-waypoints 的工作，如果您只是对在某个特定点添加功能感兴趣的话。

【讨论】：

要添加 @Frederik 的响应，使用 jQuery 航点（或滚动您自己的“onScrollToPosition”事件）只需运行 AJAX 查询，返回选择列表所需的数据。跨度>

【解决方案2】：

不想抢走@Frederik 的风头——他首先回答得正确，我只是无法轻易描述在另一条评论中向@yes123 解释我的评论所需的代码。

因此，假设您有一个长页面，在最底部附近有一个选择列表（例如，作为包含很多 cmets 的博客文章上的联系表单的一部分。

因此假设此内容位于页面的最末端：

<div id="commentForm">
  Where did you hear about us?:<select id="refererSite"></select>
  ...all the other regular fields... name, email, comment, etc.
</div>

然后，您可以使用 jQuery waypoint plugin 仅在用户实际向下滚动到所有其他 cmets 时才加载前 200 多个博客的 refererSite 列表（例如）。

你只需要添加脚本代码...

//when the document has loaded...
$(document).ready(function(){
  //queue up code to execute when the user scrolls down to the contactForm
  $('#contactForm').waypoint(function(){
    //get referer site options - AJAX call...
    $.getJSON('http://myserver.example.com/getReferers.json', function(data){
      var options = [];
      //build up options list
      $.each(data, function(key, val){
        options.push('<option value="' + key + '">' + val + '</option>');
      });
      //add to the select element
      $('#refererSite').html(options.join(''));
    });
  });
});

【讨论】：