WordPress仅用HTML实现懒加载时加载图片过多的问题解决

原生的loading="lazy"由浏览器自主控制预加载逻辑，它会依据视口高度的固定比例（比如Chrome默认是视口高度的150%）提前加载图片，所以没法做到只加载下一张。要实现精确控制，得自己编写JS懒加载逻辑：

步骤1：修改图片标签，替换原生懒加载 #

在WordPress主题的functions.php中添加钩子，替换图片的src属性为data-src，同时移除原生loading="lazy"，避免冲突：

add_filter( 'wp_get_attachment_image_attributes', 'custom_lazyload_attrs', 10, 3 );
function custom_lazyload_attrs( $attrs, $attachment, $size ) {
    // 把真实图片地址存入data-src
    $attrs['data-src'] = $attrs['src'];
    // 替换src为空白占位图（也可以用小尺寸占位图URL）
    $attrs['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    // 移除原生loading属性
    unset( $attrs['loading'] );
    // 添加自定义类方便JS选中
    $attrs['class'] .= ' custom-lazy';
    return $attrs;
}

步骤2：编写自定义懒加载JS #

这段JS会监听滚动，仅加载刚好进入视口或距离视口仅一张图片高度的图片，实现只加载下一张的效果：

document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('.custom-lazy');
    
    // 防抖函数，减少滚动触发频率
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func(...args), wait);
        };
    }

    function checkLazyImages() {
        lazyImages.forEach(img => {
            if (!img.classList.contains('custom-lazy')) return;
            const rect = img.getBoundingClientRect();
            // 触发阈值：视口底部 + 当前图片的高度（仅提前加载下一张）
            const triggerThreshold = window.innerHeight + img.offsetHeight;
            // 图片顶部进入阈值范围时加载
            if (rect.top < triggerThreshold && rect.bottom > 0) {
                img.src = img.dataset.src;
                img.classList.remove('custom-lazy');
                // 可选：添加加载完成动画类
                img.classList.add('lazy-loaded');
            }
        });
    }

    // 初始化时检查当前视口内的图片
    checkLazyImages();
    // 绑定防抖后的滚动、窗口 resize 事件
    window.addEventListener('scroll', debounce(checkLazyImages, 50));
    window.addEventListener('resize', debounce(checkLazyImages, 50));
});

把这段代码放到主题的footer.php中（</body>标签之前），或者通过WordPress的wp_enqueue_script方法引入。

可选优化：添加加载动画 #

给图片加过渡效果，提升用户体验：

.custom-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lazy-loaded {
    opacity: 1;
}

内容的提问来源于stack exchange，提问作者macylau21