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]）详解

• 1. 配置属性

属性	描述
root	边界盒 Element 对象 (默认：视口)
rootMargin	一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的 margin 属性等同，默认值是"0px 0px 0px 0px"
thresholds	规定了一个监听目标与边界盒交叉区域的比例值，值：0 - 1 之间。若值 0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。

• 2. callback的第一个参数

返回的是一个数组，里面存放着一些元素信息，下面所有属性都是只读，有以下属性

属性	描述
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).

• 3. 实例方法详解

observe.[方法名]()

方法名	描述
disconnect	停止次实例的所有监听
observe	开始监听一个目标元素
unobserve	停止监听特定目标元素