正则表达式更改 WordPress 过滤器中的 img 属性

Question

我有一个为摄影师客户开发的自定义主题，需要实现图像的延迟加载，以便博客加载速度更快，因为他当前拥有的图像量导致博客加载速度非常慢，即使只显示五个帖子。为此，我使用 JAIL jquery 插件，但我需要能够修改图像标签才能正常工作。基本上，我必须用占位符替换 src 属性，并将 data-href 属性设置为源网址。我似乎找不到在 WordPress 过滤器内正常工作的解决方案，我基本上是在帖子中过滤 the_content() 挂钩..有谁知道我如何实现这一点？

Answer 1

对于这些问题，Stackoverflow 的标准陈词滥调是您应该使用 DOM 解析器。这实际上是正确的，但对于输出操作来说不太可行（性能）。

为了实现你想要的，你可以尝试：

$html = preg_replace_callback(
           '#(<img\s[^>]*src)="([^"]+)"#',
           "callback_img", $html);

然后定义一个像这样的回调：

function callback_img($match) {
    list(, $img, $src) = $match;

    return "$img=\"placeholder\" data-href=\"$src\" ";
}

请注意，只有当你的所有图像链接一致地遵循这个方案时，这个正则表达式才有效（例如，它们都应该使用双引号）。