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属性一起添加到images / iframe中。或者，您也可以添加具有低质量图像的src属性...

不是编写动态执行的新javascript，而是应该使用小脚本，或者只使用查找和替换将类添加到所有图像元素中，并将src属性更改为data-src 。

关于设置全局img类的建议

1 个答案: