我对IntersectionObserver API非常陌生,并且我一直在试验这段代码:
let target = document.querySelector('.lazy-load');
let options = {
root: null,
rootMargin: '0px',
threshold: 0
}
let observer = new IntersectionObserver(callback, options);
observer.observe(target);
function callback() {
console.log('observer triggered.');
}
这似乎按照预期工作,当.lazy-load
元素进入视口时会调用callback()
,但是callback()
在页面初始加载时也会触发一次,这将触发`console.log('观察器已触发。');
这个回调函数在页面加载时被触发有原因吗?或者我实现的方式有误吗?
编辑:将代码更改为以下内容仍会在页面加载时触发回调。
let target = document.querySelector('.lazy-load');
let options = {
root: null,
rootMargin: '0px',
threshold: 0
}
let callback = function(entries, observer) {
entries.forEach(entry => {
console.log('observer triggered.');
});
};
let observer = new IntersectionObserver(callback, options);
observer.observe(target);