// 匹配加载 选择器
var el = document.querySelector('.class');
// 建立观察者
var ob = new IntersectionObserver(function(entries){
var entry = entries[0];
// isIntersecting 为true 为进入,false为离开
if(entry.isIntersecting) {
// 进入视窗重叠 执行加载
// console.log('执行加载');
}
},{
// 1 视窗重叠 0 视窗不重叠
thresholds: 1
});
// 观察
ob.observe(el);
1、首先,通过document.querySelector('.class')
方法选择了一个具有.class
类名的元素,并将它赋值给变量el
。
2、接着,创建了一个IntersectionObserver对象,并传入一个回调函数作为参数。这个回调函数将在观察的元素进入或离开视窗时被调用。
3、在回调函数中,通过entries
参数获取了观察元素的相关信息。在这里,我们只获取了第一个entry
。
4、使用entry.isIntersecting
属性来判断观察元素是否进入视窗。如果isIntersecting
为true
,表示元素进入了视窗,我们可以在接下来的代码中执行相应的加载操作。
5、在观察者对象的配置选项中,我们设置了thresholds
为1,表示只要有1像素的元素进入视窗,就会触发回调函数。
6、最后,调用ob.observe(el)
方法来开始观察指定的元素el
。当元素的可见性发生变化时,就会触发回调函数的执行。