如何让WordPress的WebP Express处理AJAX动态加载的图片？

方法1：直接调用WebP Express前端处理函数 #

WebP Express在前端暴露了专门处理图片转换的函数，无需模拟DOMContentLoaded事件，在AJAX成功追加HTML后直接调用即可：

// 假设AJAX回调中已将HTML追加到页面
if (typeof webpExpressReplaceImages === 'function') {
    webpExpressReplaceImages();
}

注：如果该函数名不生效，可查看WebP Express的前端JS文件（通常在wp-content/plugins/webp-express/js/目录下），找到其核心处理函数，比如部分版本为webpExpress.processImages()

方法2：在PHP端直接生成WebP兼容的图片标签 #

放弃前端转换，在AJAX的PHP处理函数中直接用WebP Express的专属钩子处理图片HTML，比the_content钩子更精准：

$image_html = wp_get_attachment_image($pic['ID'], 'medium_large');
// 使用WebP Express的HTML处理钩子转换图片
echo apply_filters('webp_express_html_alter', $image_html);

方法3：开启WebP Express的动态内容自动处理 #

进入WebP Express的设置页面，检查是否有动态内容处理或AJAX支持相关选项（不同版本命名可能不同），开启后插件会通过MutationObserver自动监听页面新增的DOM元素，自动转换其中的图片，无需额外代码。

方法4：手动添加DOM变化监听 #

如果插件没有自带动态监听，可手动创建MutationObserver监听AJAX内容容器，当有新内容追加时触发WebP处理：

// 替换为你的AJAX内容容器ID
const ajaxContainer = document.getElementById('reviews-container');
if (!ajaxContainer) return;

const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length > 0 && typeof webpExpressReplaceImages === 'function') {
            webpExpressReplaceImages();
        }
    });
});

// 监听容器内的子元素变化
observer.observe(ajaxContainer, { childList: true, subtree: true });

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