// 图片懒加载函数
function lazyloadImages() {
const images = document.querySelectorAll('.lazyload'); // 获取所有需要懒加载的图片
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
const observer = new IntersectionObserver(function(entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) { // 当图片进入可视区域
const img = entry.target; // 获取图片元素
const src = img.getAttribute('data-src'); // 获取图片的 data-src 属性值
img.src = src; // 将 data-src 的值设置为图片的 src
self.unobserve(img); // 停止监听该图片
}
});
}, config);
images.forEach(img => {
observer.observe(img); // 监听每一个图片
});
}
// 滚动到底部触发的函数
function loadMoreImages() {
const scrollArea = document.querySelector('.scroll-area'); // 需要滚动的区域
const intersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) { // 当滚动区域与可视区域相交时
lazyloadImages(); // 执行懒加载函数
observer.unobserve(entry.target); // 停止监听该元素
}
});
});
intersectionObserver.observe(scrollArea); // 监听滚动区域
}
// 初始化懒加载
lazyloadImages();
// 监听滚动事件，并在滚动到底部时加载更多图片
window.addEventListener('scroll', function() {
const scrollArea = document.querySelector('.scroll-area');
const scrollHeight = scrollArea.scrollHeight;
const scrollTop = scrollArea.scrollTop;
const clientHeight = document.documentElement.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
loadMoreImages();
}
});这段代码使用了IntersectionObserver API来实现懒加载，并且当用户滚动到页面底部时，会加载更多的图片进行懒加载。这是一种现代的、高效的图片懒加载方法，可以提高页面加载性能。