Question

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

考虑你有一个页面上有一些文字在首页（总是显示），向下滚动你有很多选择区域（<option>element 3421</option> etc内有很多元素）+其他各种元素。

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

Answer 1

这听起来像jquery-waypoints的工作，如果您只是想在某个时刻添加功能。

Answer 2

没有试图窃取@ Frederik的雷声 - 他先回答正确，我不能轻易描述在另一条评论中向@ yes123解释我的评论所需的代码。

所以假设你有一个很长的页面，在最底部附近有一个选择列表（例如，作为博客文章中的联系表格的一部分，有很多很多评论。

因此，假设此内容位于页面的非常结束：

<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仅加载前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(''));
    });
  });
});

只有在用户向下滚动时才能加载部分页面的简单方法？

2 个答案: