js 实现加载更多
js 实现加载更多
1. 使用滚动事件监听（不推荐）
2. 当loading元素出现在页面视口的时候，我们才会去触发加载更多（推荐）
- 用到的函数 监听元素重叠 IntersectionObserver
// loading
var loading = document.querySelector('.loading');
// 网络请求: false完成 true未完成
var isLoading = false;// 建立观察者（图片懒加载也可以IntersectionObserver来做）
var ob = new IntersectionObserver((entries, obInstance) => {// 此函数会触发两次（进入和离开到达 重叠范围的值时，都会触发。可通过 isIntersecting 属性来判断触发的动作：true元素从非交叉状态到交叉状态 false元素从交叉状态到非交叉状态）// entries数组：重叠的元素；let entry = entries[0];if(entry.isIntersecting && !isLoading) {// 加载更多}
}, {// root: ''// 不传默认是视口thresholds: 0.1// 重叠范围：值0-1
});// 观察
ob.observe(loading);// 使 IntersectionObserver 开始监听一个目标元素
ob.disconnect();// 停止 IntersectionObserver 监听
ob.unobserve(loading);// 使 IntersectionObserver 停止监听特定目标元素
3. IntersectionObserver（callback[, options]）详解
| 属性 | 描述 |
|---|---|
root | 边界盒 Element 对象 (默认：视口) |
| rootMargin | 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的 margin 属性等同，默认值是"0px 0px 0px 0px" |
thresholds | 规定了一个监听目标与边界盒交叉区域的比例值，值：0 - 1 之间。若值 0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。 |
返回的是一个数组，里面存放着一些元素信息，下面所有属性都是只读，有以下属性
| 属性 | 描述 |
|---|---|
| boundingClientRect | 返回包含目标元素的边界信息的 DOMRectReadOnly. 边界的计算方式与 Element.getBoundingClientRect() 相同. |
| intersectionRatio | 返回 intersectionRect 与 boundingClientRect 的比例值,如果大于 0 则表示可见，完全可见为 1. |
| intersectionRect | 返回一个 DOMRectReadOnly 用来描述根和目标元素的相交区域. |
isIntersecting | 触发的动作：true元素从非交叉状态到交叉状态 false元素从交叉状态到非交叉状态 |
| rootBounds | 返回一个 DOMRectReadOnly 用来描述交叉区域观察者(intersection observer)中的根. |
| target | 与根出现相交区域改变的元素 (Element). |
| time | 返回一个记录从 IntersectionObserver 的时间原点(time origin)到交叉被触发的时间的时间戳(DOMHighResTimeStamp). |
observe.[方法名]()
| 方法名 | 描述 |
|---|---|
| disconnect | 停止次实例的所有监听 |
| observe | 开始监听一个目标元素 |
| unobserve | 停止监听特定目标元素 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！