WordPress：WP Rocket懒加载占位图设置尺寸无效问题求助

问题背景 #

我正在尝试为WP Rocket设置自定义懒加载占位图，功能可正常运行，但无法设置占位图尺寸，它会自动继承懒加载目标原图的尺寸。

我的代码如下：

add_filter( 'rocket_lazyload_placeholder', function( $placeholder ) {
    $placeholder = get_template_directory_uri().'/assets/images/loader.svg';
return $placeholder;
}, 64, 64 );

WP Rocket的getPlaceholder方法逻辑如下：

/**
 * Returns the placeholder for the src attribute
 *
 * @since 1.2
 *
 * @param int $width  Width of the placeholder image. Default 0.
 * @param int $height Height of the placeholder image. Default 0.
 * @return string
 */
public function getPlaceholder( $width = 0, $height = 0 ) {
    $width  = 0 === $width ? 0 : absint( $width );
    $height = 0 === $height ? 0 : absint( $height );

    $placeholder = str_replace( ' ', '%20', "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 $width $height'%3E%3C/svg%3E" );
    /**
     * Filter the image lazyLoad placeholder on src attribute
     *
     * @since 1.1
     *
     * @param string $placeholder Placeholder that will be printed.
     * @param int    $width Placeholder width.
     * @param int    $height Placeholder height.
     */
    return apply_filters( 'rocket_lazyload_placeholder', $placeholder, $width, $height );
}

示例输出的img标签：

<img fetchpriority="high" decoding="async" width="300" height="215" src="#LOADER_URL#" class="attachment-300x215 size-300x215 wp-post-image" alt="" data-lazy-src="##ACTUAL_IMAGE##">

需要在实际图片加载完成前，将占位图的宽高固定为64px。

问题原因 #

1. 钩子参数配置错误：当前的rocket_lazyload_placeholder钩子函数只声明了$placeholder一个参数，且将参数个数设置为64，但该钩子实际传递3个参数（$placeholder, $width, $height），导致无法利用钩子提供的尺寸参数进行自定义。
2. img标签尺寸未修改：WP Rocket会自动为img标签添加原图的width和height属性，浏览器会依据这些属性渲染占位图，即使替换了占位图URL，尺寸仍会继承原图。

解决方案 #

方案1：内联固定尺寸SVG + 修改img属性 #

无需外部SVG文件，直接生成64x64的内联占位图，同时强制修改img标签的宽高属性：

// 替换为固定64x64的内联SVG占位图
add_filter( 'rocket_lazyload_placeholder', function( $placeholder, $width, $height ) {
    $fixed_size = 64;
    // 生成带固定宽高的内联SVG
    $placeholder = str_replace( ' ', '%20', sprintf(
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 %d %d' width='%d' height='%d'%3E%3C/svg%3E",
        $fixed_size,
        $fixed_size,
        $fixed_size,
        $fixed_size
    ));
    return $placeholder;
}, 10, 3 ); // 优先级10，参数个数3（匹配钩子传递的参数数量）

// 修改img标签的width和height属性为64px
add_filter( 'rocket_lazyload_html_attributes', function( $attributes, $tag ) {
    if ( 'img' === $tag ) {
        $attributes['width'] = 64;
        $attributes['height'] = 64;
    }
    return $attributes;
}, 10, 2 );

方案2：自定义SVG + CSS强制尺寸 #

如果继续使用自己的loader.svg，先确保SVG文件内部已设置width="64"和height="64"，然后通过CSS强制占位图尺寸：

首先修正钩子参数配置：

add_filter( 'rocket_lazyload_placeholder', function( $placeholder, $width, $height ) {
    $placeholder = get_template_directory_uri().'/assets/images/loader.svg';
    return $placeholder;
}, 10, 3 ); // 修正参数个数为3

然后添加CSS样式：

/* 懒加载完成前强制占位图尺寸 */
img[data-lazy-src] {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain; /* 保持SVG比例，避免拉伸 */
    /* 可选：添加居中样式 */
    display: block;
    margin: 0 auto;
}

关键注意点 #

• 钩子的第三个参数必须设置为3，这样函数才能接收到$width和$height参数（即使不需要使用它们，这是规范写法）。
• 若使用CSS方案，!important是必要的，因为img标签的行内width/height属性优先级较高。

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