如何将延迟加载与 TinyMCE 结合起来？

Question

我的网站上有 TinyMCE 插件。当在 TinyMCE 插件的文本区域中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户屏幕的大小，加载图像类型。移动图像具有 data-mobile-src 的数据属性，桌面图像具有 data-large-src 的数据属性。

如何做到一旦文本区域上传到我的数据库表中，图像就可以延迟加载？

Answer 1

对于任何展望未来的人，您都可以使用extended_valid_elements.

该属性用于允许有效的属性，并且您可以为它们指定默认值。所以基本上，这一行会'loading=lazy'自动添加。

extended_valid_elements : 'img[class|src|alt|title|width|loading=lazy]',

我知道你们中的一些人希望使用data-src类似的技术来支持旧版浏览器，但我找不到使用 TinyMCE 提供的任何配置的合适方法。作为解决方案，我认为这很好用

让htmlString是从tinymce接收到的内容字符串，

const doc = new DOMParser().parseFromString(htmlString, "text/html");

doc.body.querySelectorAll('img').forEach(img => {
    img.setAttribute('data-src', img.src),
    img.removeAttribute('src')
})

console.log(doc.body.innerHTML) // your html to be sent to the server

您甚至可以使用此技术将图像更改为图片元素并将其设置为 srcset。该技术也可以使用 JSDom 库在服务器端实现。