foreword
Looking through the source code of vant, I saw that the IntersectionObserver attribute is used. I don’t know what it is because I’m so ignorant. Baidu, it’s really a good thing!
IntersectionObserver is mainly used to monitor the visibility of elements , which is much better in terms of performance and convenience than traditional global monitoring of scroll events to judge visibility. Because the api is relatively new, there are compatibility issues. Fortunately, there is already a compatible polyfill . Its basic introduction and usage can be seen on the corresponding website of the polyfill.
scenes to be used
1. Image lazy loading
Listening scroll method (old):
window.addEventListener('scroll', lazyload);
function lazyload() {
const imgs = document.querySelector('.img');
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
imgs.forEach((img) => {
const imgOffsetH = util.getPosition(img).top;
// 距离页面顶部的距离 <= 视窗高 + 往上滚进去的距离
if(imgOffsetH <= innerHeight + scrollTop) {
img.src = img.getAttribute('data-src');
}
})
}
Explanation: The distance from the top of the page <= the height of the window + the distance to scroll up, that is, the picture is loaded only when it is visible, and the performance is poor
IntersectionObserver monitors the visibility of elements (new):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((img) => {
if(!img.isIntersecting) return;
img.src = img.getAttribute('data-src');
io.unobserve(img);
})
}, {
//即滚动到距离底部50px时开始算交互区
rootMargin:'0px 0px 50px 0px'
})
imgs.forEach((img) => {
io.observe(img);
})
Description: Native function, will not cause performance loss, the rootMargin threshold is intuitive
2. Scroll pagination
Listening scroll method (old):
window.addEventListener('scroll', () => {
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
const scrollHeight = util.scrollHeight();
// 滚动到距离底部50px
if(innerHeight + scrollTop >= scrollHeight - 50) {
loadMore();
}
});
Note: The height of the window + the distance to scroll up >= the height of the page is used as a condition for loading a new page, and the performance is poor
IntersectionObserver monitors the visibility of elements (new):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((entry) => {
if(!entry.isIntersecting) return;
loadMore();
})
}, {
rootMargin:'0px 0px 50px 0px'
})
//监听最底部的loadmore是否出现
const lMore = document.querySelector('.load-more');
io.observe(lMore);
Explanation: The performance is still better, and it is not necessary to judge the height of the window, the distance to roll in, etc. every time