商品、作品列表懒加载 你不知道的懒加载方法

很多作品广场或者商品列表都是滚动到底部然后继续添加数据，我们可以通过判断当前滚动条位置和数据总高度来知道是否需要加载新数据，也可以通过IntersectionObserver来监听指定元素是否到达可视窗口内，这里我就主要说一下IntersectionObserver

IntersectionObserver的作用是监测指定元素是否到达可视窗口内，imgParent就是监听是否到可视窗口的元素，

new IntersectionObserver(
    (entries, observer) => {
		// 如果不是相交，则直接返回
		if (!entries[0].intersectionRatio) return;
		
	      这里执行获取列表的方法
	},
	// { root:worksPage }
).observe(imgParent);

另外它还可以配置一些参数只需要把options放在箭头函数后面即可

let options = {
    root: null, // 视口作为根元素
    rootMargin: '0px', // 根元素外边距
    threshold: 0.5 // 交叉比例，当目标元素50%可见时触发回调
};