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

Posted 2023-02-22

【中文标题】仅当用户向下滚动时才加载部分页面的简单方法？

【英文标题】：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>）？怎么样？

【参考方案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(''));
    );
  );
);