不能更简单：jScroll 实现页面无限滚动加载

产品内容越来越多，之前偷懒直接把所有内容一次返回的做法就不合适了。于是需要改造成 infinited scrolling 模式，一次返回一部分内容，阅览到底部时再加载下一部分。

大象装冰箱，拢共分三部：

---

首先增加分页参数

这里有一般有两种方案

1. 固定每页的条目数，用参数指定页码进行加载
   这个方案好处是页码参数是连续可预测的，据说搜索引擎比较友好，当然后台缓存之类优化方案也较简单。

2. 用参数指定起始数据的位置和需要加载的条目数
   这个方案的好处是比较灵活，尤其是面向不同终端可能产生加载条目数不同的情况。当然每次加载的条目数也可以固定，这个灵活而定。

简书网站首页倒是采用了别的方案，每次会把当前加载的文章 id 全部存下来，当做下次请求的参数传给后台。

好处当然更灵活，不过缺点也显而易见，一是数据量变大，另一个是 get 方式 url 长度有限制。果然简书目前最多加载 60 条数据就不再加载了。

采用这个方案应该是为了避免排序变化导致的重复加载吧，虽然感觉应该有更好的实现方案，不过参数部分就到这里。

---

接着增加 js 处理

找到一个好用的 jQuery 的插件 jScroll，只需要选中容器，就可以根据屏幕位置自动触发完成数据加载，改动量可以忽略不计。

$('.jscroll').jscroll();

主要原理是向容器内插入标签，根据该标签的偏移位置和容器高度计算触发位置；从页面指定标签内取得下一页 url ，获得 html，追加到容器底部。

这个插件还可以自定义 loading 时显示的内容、调整触发加载的位置以更好实现预加载、自定义方法对加载结果进行处理，非常好用。

当然美中不足也是在容器和新加载的内容间嵌套自己的标签，可能会对原有选择器造成干扰。

---

最后改造后台

将原有加载内容的逻辑抽出为新的接口，相应的页面部分抽出后几乎也只需增加标识下一页的标签，改动量可以忽略不计。

<div style="display: none;">
    <a href="{next page url}">next</a>
</div>

---

完成后的效果：

• 页面打开速度提高了 500ms
• 内容完美实现了无限滚动加载
• 速度太快导致白写了个酷炫的 loading 动画