js，jquery解决 图片加载-滚动底部 问题

// 图片懒加载函数
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来实现懒加载，并且当用户滚动到页面底部时，会加载更多的图片进行懒加载。这是一种现代的、高效的图片懒加载方法，可以提高页面加载性能。