如何在WordPress中添加图片懒加载

1. 在WordPress里搞图片懒加载其实特简单，就像给网站装了个“按需加载”的开关。用户不往下滚，图片就不加载——省流量还能提速，主题文件都不用改，插件怼上就行！

2. 先推荐个神器插件叫"a3 Lazy Load"，安装后勾选图片延迟加载，自动生效。如果非要自己写代码，试试在主题的functions.php里塞这段：

function add_lazy_loading($content) {
    return str_replace('<img', '<img loading="lazy"', $content);
}
add_filter('the_content', 'add_lazy_loading');

3. 注意！有些主题自带懒加载，比如Astra或者GeneratePress，别重复搞不然图片可能抽风。检查方法：打开浏览器开发者工具（F12），看Network标签里图片是不是滚动时才加载。

4. 进阶玩法用Intersection Observer API，现代浏览器都支持。比如给图片加data-src属性，再用这段JS：

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = document.querySelectorAll('img[data-src]');
    let observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.src = entry.target.dataset.src;
                observer.unobserve(entry.target);
            }
        });
    });
    lazyImages.forEach(img => observer.observe(img));
});

5. 最后记得测试兼容性，老旧浏览器可能得用polyfill。懒加载就像让网站学会“喘气”，用户滑到哪读到哪，SEO和用户体验双赢——但小心别把首屏图片也延迟了，否则Google爬虫可能会懵。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。