如何将延迟加载与TinyMCE结合使用？

Question

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

我该如何制作，以便在将textarea上传到我的数据库表后，图像可以延迟加载？

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 库。