关于设置全局 img 类的建议

Question

我在网站上有很多图像，无法单独编辑它们，所以我想在全球范围内编辑它们，以便它们都能从这段代码中受益https://github.com/aFarkas/lazysizes

我看过这个视频，但据我所知https://www.youtube.com/watch?v=Uwnmn65cMec

我是否正确假设该插件的 src 像这样放在 footer.php 中：

<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></noscript>

然后是在其他地方添加一些代码来编辑/为每个图像添加一个类并编辑每个图像的 src 使其显示 data-src 的情况？

我远非编码员，不知道如何将它们组合在一起。我在输入图像类时看到了这个，但它是为了让图像具有响应性，并没有告诉我如何编辑 src。

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {           
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;   
}

我在哪里找到该代码：How to add automatic class in image for wordpress post

谢谢

Answer 1

你在正确的道路上，你已经包含了这个脚本：

<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></noscript>

现在，如果您查看您提供的 github 链接，您将看到下一个 step。

将“lazyload”类与 data-src 和/或 data-srcset 属性一起添加到您的图像/iframe 中。或者，您还可以添加具有低质量图像的 src 属性...

与其编写动态执行此操作的新 javascript，不如修改一个小脚本或仅使用查找和替换将类添加到所有图像元素并将 src 属性更改为 data-src。