WordPress 开启 WP Rocket 懒加载后如何添加占位图？三种完美解决方案（实测有效）

2025-08-30
4:33 下午
高级教程

在网站性能优化中，图片懒加载（Lazy Load） 是最常见的优化手段之一。
开启后，只有当用户滚动到图片所在位置时，才会真正加载图片，从而显著提升首屏加载速度。

不过，使用 WP Rocket 插件开启懒加载后，很多站长会遇到一个问题：

👉 图片在加载前是一片空白，滚动时会突然跳出来，体验感很差。

那怎么解决呢？答案就是 为懒加载图片添加占位图，在图片未加载前显示一张默认图或 loading 动画，让过渡更加自然。

经过实际测试，我总结了三种完美解决方案，并最终选择了 Filter 方案 来实现。

🔹 方案一：纯 CSS 占位（简单高效）

利用 img[data-lazy-src] 选择器，在图片加载前添加背景占位，加载完成后 WP Rocket 会自动加上 .lazyloaded，我们再移除背景即可。

/* 图片未加载时 */
img[data-lazy-src] {
    background: url('/wp-content/uploads/loading.gif') center center no-repeat #f5f5f5;
    min-height: 40px;
    display: inline-block;
}

/* 图片加载完成时 */
img.lazyloaded {
    background: none !important;
}

✅ 优点：实现简单，性能好
⚠️ 缺点：只是背景占位，图片 src 依旧是透明 SVG

🔹 方案二：JS 动态加载动画（更灵活）

通过 JavaScript 在图片加载前加上 loading class，加载完成后移除，配合 CSS 来实现 loading 动画。

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img[data-lazy-src]");

    lazyImages.forEach(img => {
        // 加载前
        img.classList.add("img-loading");

        // 加载完成后
        img.addEventListener("load", function() {
            img.classList.remove("img-loading");
        });
    });
});

配合 CSS：

img.img-loading {
    background: url('/wp-content/uploads/loading.gif') center center no-repeat #f5f5f5;
    min-height: 40px;
}

✅ 优点：灵活，可以实现骨架屏、炫酷动效
⚠️ 缺点：需要额外 JS 代码，稍微增加渲染开销

🔹 方案三：Filter 替换 WP Rocket 占位符（我采用的方案 ✅）

WP Rocket 默认用透明 SVG 作为占位符，但它提供了 rocket_lazyload_placeholder 过滤器，我们可以通过它来替换占位图。

在主题的 functions.php 添加以下代码：

add_filter( 'rocket_lazyload_placeholder', function( $placeholder, $width, $height ) {
    // 使用自定义占位图
    return 'https://www.example.com/wp-content/uploads/placeholder.jpg';

    // 如果你想用 gif 动画
    // return 'https://www.example.com/wp-content/uploads/loading.gif';
}, 10, 3 );